如何在特定标签中使用正则表达式替换 html 属性

Question

我只需要使用正则表达式将“p-type”的值替换为“p-kind”，例如：

输入：

<button p-type="foo">
    anything
</button>

输出：

<button p-kind="foo">
    anything
</button>

“p-type”属性可能不是第一个，但即便如此也应该改为“p-kind”，例如：

输入 ：

<button anythingProperty p-type="foo">
    anything
</button>

输出：

<button anythingProperty p-kind="foo">
    anything
</button>

如果标签不是按钮，则“p-type”仍然存在，例如具有此属性的 div 将不会更改。

我可以使用以下表达式进行更改：(p-type)([a-zA-Z0-9:]*)。 但这对所有人都发生了变化，我只想将 <button></button> 分组

Answer 1

• 不要使用无效的 HTML5 属性。请改用data-* attributes
• 不要使用 RegExp。请改用DOMParser

const input = `<button style="color:red;" data-type="foo">anything</button>`;

const doc = new DOMParser().parseFromString(input, "text/html");
const btn = doc.querySelector("button");
btn.dataset.type = "bar";

console.log(btn.outerHTML)

或者，为了完全修改属性：

const input = `<button style="color:red;" data-type="foo">anything</button>`;

const doc = new DOMParser().parseFromString(input, "text/html");
const btn = doc.querySelector("button");
const dataValue = btn.dataset.type; // store the old value
delete btn.dataset.type; // delete old data attribute
btn.dataset.kind = dataValue; // add new data attribute

console.log(btn.outerHTML)

Answer 2

要使用正则表达式仅在“按钮”标签中将“p-type”的值替换为“p-kind”，您可以使用以下模式：

(<button[^>]*)p-type=([^"]*)"

此模式匹配“按钮”标签，后跟零个或多个非“>”字符，然后是单词边界和字符串“p-type=”，后跟零个或多个非双引号字符。

要替换匹配的字符串，您可以使用以下替换模式：

$1p-kind=$2"

此替换模式使用原始模式中捕获的组来创建新字符串。第一个捕获组是“button”标签，后跟字符串“p-kind=”，第二个捕获组是双引号之间的值。

以下是使用替换方法和上述模式的 JavaScript 示例代码：

let input = `<button p-type="foo">
    anything
</button>
<button anythingProperty p-type="foo">
    anything
</button>
<div p-type="foo">
    anything
</div>`;

let output = input.replace(/(<button[^>]*)p-type=([^"]*)"/g, "$1p-kind=$2"");console.log(output);

此代码输出以下内容：

<button p-kind="foo">
    anything
</button>
<button anythingProperty p-kind="foo">
    anything
</button>
<div p-type="foo">
    anything
</div>

如您所见，“p-type”属性仅在“button”标签中被替换。