如何在iQuery或纯JavaScript的帮助下替换html标记的第一个标记的文本内容?

bxfogqkk  于 2022-12-21  发布在  Java
关注(0)|答案(2)|浏览(104)

我有一个标记字符串数组,例如:

const array = [
  '<p class="item">text</p>',
  '<h1>hello</h1>',
];

我想替换每个标记字符串的第一个标记的文本内容。我想使用replace方法,但因为它不总是<p>标记,有时标记的标记具有类属性,所以我不能只针对<p></p>之间的文本。我尝试使用jQuery的html方法,但它不起作用。
怎样才能完成刚才描述的任务呢?

nlejzf6q

nlejzf6q1#

解析任何类型的标记都不应该留给基于正则表达式的方法,因为后者在设计上无法与专门的解析器竞争。
因此,OP可能会查看DOMParserDOMParser.parseFromString(用于解析)以及HTMLElement.innerText(文本替换)和Element.outerHTML(再次序列化)。

function replaceContentOfFirstTagInMarkup(markup, content) {
  const targetNode = (new DOMParser)
    .parseFromString(markup ?? '', "text/html")
    ?.body
    ?.firstElementChild ?? null;

  if (targetNode !== null) {

    targetNode.innerText = content ?? '';
    markup = targetNode.outerHTML;
  }
  return markup;
}

const markupList = [
  '<p class="item">text</p>',
  '<h1>hello</h1>',
];
const contentReplacementList = [
  'the quick brown fox',
  'Hello world',
];

const newMarkupList = markupList
  .map((markup, idx) =>
    replaceContentOfFirstTagInMarkup(
      markup, contentReplacementList[idx]
    )
  );
console.log({
  markupList,
  contentReplacementList,
  newMarkupList,
});
.as-console-wrapper { min-height: 100%!important; top: 0; }

一个可能的基于jQuery的实现可能如下所示。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

olhwl3o2

olhwl3o22#

试试这个:

let array = [
  "<p class='item'>a lot of text</p>",
  "<h1>hello</h1>"
]

function changeElementText(_array, _index, _newText) {
  return _array.map((e, i) => {
    if (i === _index) return e.replace(/>[\s\S]*</g, `>${_newText}<`)
    return e
  })
}

console.log(changeElementText(array, 0, 'Text Changed! 🦊'))
// [ 
// "<p class='item'>Text Changed! 🦊</p>", 
// '<h1>hello</h1>' 
//]
// (This returns a copy of the original array)

// if you want to overwrite the original value
array = changeElementText(array, 0, 'Text Changed! 🦊')

相关问题