javascript - 如何为跨度属性创建正则表达式？

Question

好吧，我承认，我不擅长正则表达式。我正在尝试获取属性 data-hover-id 的值。

我有以下 javascript 代码：

var editText = "<span class='hover-content' data-hover-id='2' >Some text</span>";

var hoverId = -1;

// Get HoverID if it exists
var regex = /span.*data-hover-id=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/;
var result = regex.exec(editText);
if (result.length > 1) {
  hoverId = result[1];
}

上述代码的结果是 hoverId 等于 '2（撇号 2）。

我想要不带引号或撇号的值 2。在这种情况下，正则表达式是什么？有没有更好的方法在 Javascript 中做到这一点？

Answer 1

您可以使您的正则表达式更简单，例如：

var re = /data-hover-id=["'](.+)["']/;
var result = re.exec(str)[1];

编辑：如果您根本不需要考虑引号，请尝试以下操作：

/data-hover-id=['"]?([^\s>]+)['"]?/

Answer 2

一种简单的方法（避免混乱的字符串操作）：

var editText = "<span class='hover-content' data-hover-id='2' >Some text</span>",
    tmp = document.createElement('div');
tmp.innerHTML = editText;
tmp.style.display = 'none';
document.getElementsByTagName('body')[0].appendChild(tmp);
var hoverId = tmp.getElementsByTagName('span')[0].getAttribute('data-hover-id');
tmp.parentNode.removeChild(tmp);

alert(hoverId);​

JS 小提琴演示。

但是，鉴于：

该字符串被操纵。

我还将提供：

var editText = "<span class='hover-content' data-hover-id='2' >Some text</span>",
    parts = editText.split(/\s+/),
    hoverId = -1;

for (var i = 0, len = parts.length; i < len; i++) {
    if (parts[i].indexOf('data-hover-id') == 0) {
        hoverId = parseInt(parts[i].split('=')[1].match(/\d+/), 10)
    }
}
console.log(hoverId);​

JS 小提琴演示。

还有一个更简洁（虽然可能很脆弱）的解决方案：

var editText = '<span class="hover-content" data-hover-id=2 >Some text</span>',
    hoverId = editText.match(/\s?data\-hover\-id=(?:['"])?(\d+)(?:['"])?/)[1] || -1;

console.log(hoverId);

Works with single-quoted (') attribute-values: JS Fiddle demo.

Works with double-quoted (") attribute-values: JS Fiddle demo.

Work with unquoted values: JS Fiddle demo.