使用属性的值作为元素的内容答案

【问题标题】：Use value of attribute as content of element使用属性的值作为元素的内容
【发布时间】：2021-03-06 12:43:48
【问题描述】：

我在寻找什么

我有这样的代码：

<div this-html="text goes here"></div>

在一个正则表达式之后，我希望属性“this-html”的值是开始和结束标记之间的文本，如下所示：

<div>text goes here</div>

元素可以包含其他属性并且不必是div，它基本上可以是任何其他类型的元素，只要它使用结束标记（不必在同一行） .输入也可能在标签之间有文本，比如<div this-html="text goes here">dummy text</div>，但可以忽略/应该用“this-html”属性的值覆盖。

我有什么

我不能使用 jQuery 或将字符串转换为 Javascript 对象，因为它可能包含 PHP（如果您再次将其转换回字符串，它将变得残废）。此脚本在应用程序的“发布到 html”过程中使用，因此它可以包含 PHP。所以，我正在尝试使用正则表达式来解决它。

所以基本上，我只有 Javascript，我需要使用的 HTML 只是一个字符串，没有 DOM 可以使用。

现在，我有一个正则表达式可以为我执行此操作，但是当您在同一行上有多个匹配项或当我在“this-html”之后有另一个属性时，它就不起作用了。

这是我正在使用的正则表达式： /(<\s*[^<]+?)this-html=['"]{1}(.+)['"]{1}([^>]*>)[\w\W]*?(<\/.+>)/gmi

然后我将它与$1$3$2$4 重新组合在一起。

现在，假设我有以下输入： <div this-html="text goes here!" class="something">test</div><div this-html="another test">Option is visible on preview/publish</div>

然后我的正则表达式模式会搞砸，我最终会得到这样的结果： <div >text goes here!" class="something">test</div><div this-html="another test</div>

我不是正则表达式专家，但我觉得这个正则表达式可能要简单得多，但我被困在这里。

有什么想法吗？

【问题讨论】：

1. regex is not suitable to parse HTML 2. 你不必为这样的任务编写字符串；一个 HTML 文档被解析成 DOM 3. 使用element.innerHTML = element.getAttribute('this-html') 4. 请通过“可能包含 PHP”来澄清你的意思
@ChrisG，我稍微编辑了我的帖子。我在应用程序的“发布到 html”过程中使用它。 Javascript 在那里可用，但我需要使用的 HTML 只是一个字符串，没有 DOM。
见regex101.com/r/fQtnmo/2, text.replace(/(<\s*(\w+)[^<]*?)\s+this-html=['"]([^"']*)['"]([^>]*?)\s*>[\w\W]*?(<\/\2>)/gi, '$1$4>$3$5')
您可以基于字符串创建一个虚拟 DOM，在元素上运行代码，然后将结果转回 HTML。
不要用那个，认真的。使用这个：jsfiddle.net/jymr20gp

标签： javascript html regex

【解决方案1】：

这是做你想做的事情的正确方法：

function convert(html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  div.querySelectorAll('*').forEach(el => {
    var h = el.getAttribute('this-html');
    if (h) {
      el.innerHTML = h;
      el.removeAttribute('this-html');
    }
  });
  return div.innerHTML;
}


var html = '<div this-html="text goes here!" class="something">test</div><div this-html="another test">Option is visible on preview/publish</div>';

console.log( convert(html) );

但是，由于您的环境不允许您使用 DOM，您可能会求助于像这样的正则表达式

text.replace(/(<\s*(\w+)[^<]*?)\s+this-html=['"]([^"']*)['"]([^>]*?)\s*>[\w\W]*?(<\/\2>)/gi, '$1$4>$3$5')

请参阅regex demo。注意：一旦可以使用 DOM，请切换到解决方案，而不是这种解决方法。

详情

(<\s*(\w+)[^<]*?) - 第 1 组（$1 值）：<，零个或多个空格，第 2 组（$2 值）：任何一个或多个单词字符，然后是除 < 之外的任何零个或多个字符尽可能少
\s+ - 一个或多个空格
this-html= - 文字文本
['"] - " 或 '
([^"']*) - 第 3 组（$3 值）：除 " 和 ' 之外的零个或多个字符
['"] - " 或 '
([^>]*?) - 第 4 组（$4 值）：除 > 之外的任何零个或多个字符尽可能少
\s* - 零个或多个空格
> - 一个 > 字符
[\w\W]*? - 任何零个或多个字符，尽可能少
(<\/\2>) - 第 5 组（$5 值）：</，与第 2 组中的值相同，>。

查看 JavaScript 演示：

var text = '<div this-html="text goes here!" class="something">test</div><div this-html="another test">Option is visible on preview/publish</div>';
console.log( text.replace(/(<\s*(\w+)[^<]*?)\s+this-html=['"]([^"']*)['"]([^>]*?)\s*>[\w\W]*?(<\/\2>)/gi, '$1$4>$3$5') );

【讨论】：

感谢您的全面回答，非常感谢！在我有机会实施适当的解决方案之前，这是必须要做的。

【解决方案2】：

我不知道字符串中包含的 PHP 代码会是什么样子，但是这样的东西可以吗？ :)

var regex = /<\s*(\w+)([^>]*)\s*this-html=\"([^"]*)\"([^>]*)>[^<]*<\s*\/\s*\w+\s*>/gi;
var stringTest = '<div this-html="text goes here!" class="something">test</div><div this-html="another test">Option is visible on preview/publish</div>';
var result = stringTest.replace(regex,'<$1$2$4>$3</$1>');
alert(result);

【讨论】：