javascript 如何将现有文本片段放入新创建的元素节点中?[已关闭]

ryhaxcpt  于 2023-01-07  发布在  Java
关注(0)|答案(4)|浏览(132)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
1年前关闭。
截至22小时前,社区正在审查是否重新讨论这个问题。
Improve this question
假设我在论坛上有一些HTML:

<div class="sign">username <span class="info">info</span></div>

我想编写一个用户脚本,将其更改为如下形式:

<div class="sign"><a itemprop="creator">username</a> <span class="info">info</span></div>

(The a元素也将具有href。我有意省略了它以使代码更短。)
我知道如何创建a元素,为它分配一个自定义属性,并将它添加到DOM中。
但是我不明白如何用它来 Package username,也就是说,如何将第一个代码段中的username转换为第二个代码段中的<a itemprop="creator">username</a>

roejwanj

roejwanj1#

使用普通DOM API做这件事有点复杂,但并不太难。您需要找到包含要替换的片段的DOM文本节点,将其拆分为三部分,然后用所需的节点替换中间部分。
如果您有一个文本节点textNode,并且希望将从索引i到索引j的文本替换为由replacer计算的节点,则可以使用以下函数:

function spliceTextNode(textNode, i, j, replacer) {
    const parent = textNode.parentNode;
    const after = textNode.splitText(j);
    const middle = i ? textNode.splitText(i) : textNode;
    middle.remove();
    parent.insertBefore(replacer(middle), after);
}

修改你的例子,你将不得不这样使用它:
x一个一个一个一个x一个一个二个x
注意在注入"username"链接之后,"clickmetoo"处理程序仍然附加到链接上;修改innerHTML将不能保持这一点。

slhcrj9b

slhcrj9b2#

您可以尝试更换innerHTML

var el = document.querySelector('.sign');
el.innerHTML = el.innerHTML.replace('username', '<a itemprop="creator">username</a>');
<div class="sign">username <span class="info">info</span></div>
kb5ga3dv

kb5ga3dv3#

这边吗?

let parentElm = document.querySelector('div.sign')
  , refNod    = parentElm.childNodes[0] 
  ;
  
if ( refNod.nodeValue === 'username') 
  {
  let newNod = document.createElement('a')
  // newNod.href = '/...'
  newNod.setAttribute('itemprop','creator')
  newNod.textContent = refNod.nodeValue
 
  parentElm.replaceChild( newNod, refNod )
  }

/*****/
console.log( parentElm.innerHTML )
<div class="sign">username<span class="info">info</span></div>
wnavrhmk

wnavrhmk4#

找到所有包含类.sign的元素,并在span标记之前用a Package 文本替换其内部HTML。

var elms = document.querySelectorAll('.sign');
for (var i = 0; i < elms.length; i++) {
  let item = elms[i];
  var html = item.innerHTML;
  item.innerHTML = html.replace(/(.*)?<span/, "<a itemprop=\"creator\" href='#'>$1</a><span");
}
<div class="sign">username <span class="info">info</span></div>
<div class="sign">other name <span class="info">info</span></div>
<div class="sign">other more and more <span class="info">info</span></div>

有时候,使用一点正则表达式就能挽救局面。
如果要保留附加到跨度元素的事件-

var elms = document.querySelectorAll('.sign');
elms.forEach(item => {
  let span = item.querySelector('span');
  var html = item.innerHTML;
  let txt = html.match(/(.*)?<span/)[0].replace("<span", "");
  item.innerHTML = `<a itemprop="creator" href='#'>${txt}</a>`;
  item.appendChild(span);
});

相关问题