在 markup-string 中，如何替换任何例如class-name 指定的元素有自己的 title-text？

Question

我有一个名为 $text 的变量。

我想这样做，如果有任何带 class“表情”的 span，请将整个 span 及其内容替换为 span 的 title 属性。另外，必须区分大小写。

如果 $text 将此作为值：

<p>blah blah blah <span class="emote" title="bOOger"> blah blah blah</span></p>

会变成这样：

<p>blah blah blah bOOger</p>

我怎样才能做到这一点？

Answer 1

function replaceAnyTargetedElementByItsTitleText(markup, selector) {
  const doc = (new DOMParser)
    .parseFromString(markup, "text/html");

  doc
    .body
    .querySelectorAll(selector)
    .forEach(node => node
      .parentNode
      .replaceChild(
        document.createTextNode(node.title),
        node,
      )
    );

  return doc.body.innerHTML;
}

const markupBefore =
  '<p>foo bar baz <span class="emote" title="bOOger">quick brown fox</span></p>';

const markupAfter =
  replaceAnyTargetedElementByItsTitleText(markupBefore, '.emote');

console.log({ markupBefore, markupAfter });

.as-console-wrapper { min-height: 100%!important; top: 0; }

在 markup-string 中，如何替换任何例如class-name 指定的元素有自己的 title-text？

Within a markup-string, how to replace any e.g. class-name specified element with its own title-text?

html

javascript

markup

domparser