Question

我试图使用正则表达式来提取类似于下面的字符串。但是，data-plugin属性中会有多个具有不同功能。

<div class="plugin" data-plugin="function(1,2,'func')"></div>

我使用的表达方式如下：

/<div class="js-plugin" data-plugin="([a-zA-Z0-9\(\),\' ]*)"></div>/

但是，这可以起作用，因为像'func'这样的字符串可能包含各种特殊字符。

如何使用正则表达式提取整个字符串，并匹配data-plugin=""中的内容以及假设可能存在多个匹配项。

Answer 1

不要使用正则表达式从html元素中获取数据。选择元素并使用dom方法来获取数据。

＆＃13;

console.log(document.querySelector(".plugin").getAttribute("data-plugin"));

＆＃13;

<div class="plugin" data-plugin="function(1,2,'func')"></div>

＆＃13;

Answer 2

如果你需要正则表达式，这应该可行。

正则表达式：

\bdata-plugin="([a-zA-Z0-9\(\),\']*)

输入：

<div class="plugin" data-plugin="function(1,2,'func')"></div>

输出：

function(1,2,'func')

＆＃13;

const regex = /\bdata-plugin="([a-zA-Z0-9\(\),\']*)/;
const str = `<div class="plugin" data-plugin="function(1,2,'func')"></div>
`;
let m;

if ((m = regex.exec(str)) !== null) {
    // The result can be accessed through the `m`-variable.
    m.forEach((match, groupIndex) => {
        console.log(`Found match, group ${groupIndex}: ${match}`);
    });
}

＆＃13;

请参阅：https://regex101.com/r/FPH9O3/3

使用正则表达式从HTML中提取数据

2 个答案: