主页 / user-11769133

Milos Stojanovic's questions

Martin Hope
Milos Stojanovic
Asked: 2025-03-08 06:06:30 +0800 CST
  • 5

我正在制作 Chrome 扩展程序。我试图让弹出窗口可拖动并能够在屏幕上移动。我可以移动它，但它卡在屏幕右侧，直到到达max-width。我做错了什么？

这是简化的代码。

const popup = document.getElementById("popup");
const dragBtn = document.getElementById("drag-btn");

let offsetX, offsetY, isDragging = false;

dragBtn.addEventListener("mousedown", (e) => {
    isDragging = true;
    offsetX = e.clientX - popup.offsetLeft;
    offsetY = e.clientY - popup.offsetTop;
});

document.addEventListener("mousemove", (e) => {
    if (isDragging) {
        popup.style.left = `${e.clientX - offsetX}px`;
        popup.style.top = `${e.clientY - offsetY}px`;
    }
});

document.addEventListener("mouseup", (e) => {
    isDragging = false;
});
#popup {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 350px;
    max-width: 500px;
    background: var(--dark-bg, #222);
    color: var(--dark-text, #fff);
    border: 1px solid #333;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 8px;
    z-index: 10000;
}

#popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

#popup-title {
    font-size: 14px;
    font-weight: bold;
}

button {
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    width: 26px;
    height: 26px;
    text-align: center;
    padding: 0;
}

#drag-btn {
    background: #326042;
    color: white;
    cursor: grab;
}

#theme-btn {
    background: #ef713b;
    color: white;
}

#close-btn {
    background: #ff5252;
    color: white;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Song Lyrics Finder</title>
    <link rel="stylesheet" href="src/style.css">
</head>
<body>
    <div id="popup">
        <div id="popup-header">
            <p id="popup-title">Song Lyrics Finder (from Genius.com)</p>
            <div style="display: flex; align-items: center; gap: 5px;">
                <button id="drag-btn">✥</button>
                <button id="theme-btn">&#9681;</button>
                <button id="close-btn">&#11199;</button>
            </div>
        </div>
    </div>
</body>
</html>

javascript
Martin Hope
Milos Stojanovic
Asked: 2025-03-06 22:38:52 +0800 CST
  • 8

我正在尝试清除 YouTube 视频标题中不必要的单词，例如“官方视频”、“音频”、“音乐视频”等。我需要帮助构建可以使用的正则表达式。到目前为止，我尝试过：

const regex = /\s*[-\(\[]?\s*(-|official|video|audio|lyrics|lyric|hd|full|4k|music\s+video|\d{4})\s*[\)\]]?$/gi;

据我了解，这只会删除最后一次出现的关键字。我所做的是在这样的循环中使用它：

function clearSearchTerm(title) {
    const regex = /\s*[-\(\[]?\s*(-|official|video|audio|lyrics|lyric|hd|full|4k|music\s+video|\d{4})\s*[\)\]]?$/gi;
    let newTitle;

    do {
        newTitle = title;
        title = title.replace(regex, "");
    } while (newTitle !== title);

    return title;
}

目前它对我来说是有效的，因为我没有找到任何它不起作用的例子。评论中提到的是，我以前的正则表达式会删除出现在标题中间的关键字，我猜这个问题已经解决了。如果你知道如何改进这一点，我洗耳恭听。在下一部分中，我将写一些我需要删除的示例。

我想要删除的单词如下：

Audio
Video
Lyrics
Official
Remaster
2020 (or years in general)
...

所有这些词（可能还有更多）都可以出现在(and之间)或[and之间]或之后-。这些词可以组合在一起，例如：Some title - Official Videowhich should be cleaned to beSome title等等。

javascript