如何查找/删除innerhtml的最后文本部分

ttp71kqs 于 2021-09-23 发布在 Java

关注(0)|答案(4)|浏览(291)

我有一个 <div> 包含html元素和文本的元素。我想查找/删除它的最后一个或最后第n个或仅第n个文本部分。
比如说

<div id="foo">
   <span id="bar">abcdefg</span>
   <span id="baz">z</span>
</div>

如果我有删除最后一个文本字符的方法，第一次调用将删除 z 第二个呼叫将删除 g . 或者如果我有办法找到第四个字符，它就会返回 d .

JavaScript Html Dom

来源：https://stackoverflow.com/questions/68320472/how-to-find-remove-last-text-portion-of-innerhtml

4条答案

按热度按时间

wa7juj8i1#

听起来您只关心文本节点，所以可能是这样的，这样您就可以删除 nth 人物：

var div = document.getElementById("foo");

const getTextNodes = (el, nodes) => {
    nodes = nodes || [];

    for (var i = 0; i < el.childNodes.length; i++) {
        var curNode = el.childNodes[i];
        if (curNode.nodeName === "#text") {
            if (curNode.textContent.trim().length) {
                nodes.push(curNode);
            }
        } else {
            getTextNodes(curNode, nodes);
        }
    }

    return nodes;
}

console.log(getTextNodes(div).map((el) => el.textContent));

const deleteNthCharacter = (el, n) => {
    n--; // since we want to be "1 indexed"
    const nodes = getTextNodes(el);
    let len = 0;
    for (let i = 0; i < nodes.length; i++) {
        const curNode = nodes[i];
        if (len + curNode.textContent.length > n) {
            curNode.textContent = curNode.textContent.substring(0, n - len) + curNode.textContent.substring(n + 1 - len);
            break;
        } else {
            len += curNode.textContent.length;
        }
    }
}

deleteNthCharacter(div, 2);
deleteNthCharacter(div, 7);

<div id="foo">
   <span id="bar">abcdefg</span>
   <span id="baz">z</span>
</div>

赞(0）回复(0）举报 2021-09-23

gg58donl2#

如果我正确理解了你的问题，这应该可以做到：

function deleteLastChar(targetId){
    const target = document.getElementById(targetId);

  let lastWithText = -1;
  //find last child that has text set
  target.childNodes.forEach((child, iter) => {
    if(child.innerText != undefined && child.innerText.length > 0){
        lastWithText = iter;
    }
  });

  // exit if no valid text node was found
  if(lastWithText === -1)
    return;

   const lastNode = target.childNodes[lastWithText];
   lastNode.innerText = lastNode.innerText.slice(0, -1);
}

deleteLastChar("foo")
deleteLastChar("foo")
deleteLastChar("foo")
deleteLastChar("foo")

<div id="foo">
   <span id="bar">abcdefg</span>
   <span id="baz">z</span>
</div>

赞(0）回复(0）举报 2021-09-23

vom3gejh3#

如果我理解这个问题，这可能就是你想要的

let x = document.getElementById('foo').children;
function erase() {
  for (let i = x.length - 1; i >=0; i--) {
    if(x[i].textContent.length > 0) {
      const textC = x[i].textContent;
      x[i].textContent = textC.substring(0, textC.length - 1);
      return;
    }
  }
}

<div id="foo">
   <span id="bar">abcdefg</span>
   <span id="baz">z</span>
</div>
<button onclick="erase()">Erase</button>

赞(0）回复(0）举报 2021-09-23

jchrr9hc4#

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="foo">
   <span id="bar">abcdefg</span><br>
   <span id="baz">z</span><br><br>
   <div id="result"></div>
   <div id="result2"></div>

</div>

<script type="text/javascript">
var s = function(x){
return document.querySelector(x)
}

log = console.log;

var span1 = s("#bar")
var span2 = s("#baz")
var result = s("#result")
var result2 = s("#result2")

var res = span1.innerText.charAt(4)

// with the charAt method
result.innerText = " Result is : " +res+"\n\n"

// with regular Expression

var reg = /e/
result2.innerText = " Result2 is : " +span1.innerText.match(reg)

</script>
</body>
</html>

赞(0）回复(0）举报 2021-09-23

我来回答

如何查找/删除innerhtml的最后文本部分

4条答案

相关问题

热门标签

最新问答