Question

我有一个HTML元素，可以包含纯文本或其他HTML元素：

<!-- plain text -->
<div class="content">
  SIMPLE TEXT.
</div>

<!-- or other html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
    </tr>
  </table>
</div>

<!-- more html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML!</span>
  </div>
</div>

<!-- one more example -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML</span>!
  </div>
</div>

如何在我的.content div中的最后一个可打印字符中再添加一个HTML元素，无论该字符是哪个HTML元素？

预期结果：

<!-- plain text -->
<div class="content">
  SIMPLE TEXT.<span class="end"></span>
</div>

<!-- or other html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b<span class="end"></span></td>
    </tr>
  </table>
</div>

<!-- more html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML!<span class="end"></span></span>
  </div>
</div>

<!-- one more example -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML</span>!<span class="end"></span>
  </div>
</div>

Answer 1

通过你的元素递归来获取最后一个文本节点

https://jsfiddle.net/30ezoyau/

<div id="content">
  SIMPLE <span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>a</td>
      <td id="last">b</td>
    </tr>
  </table>
</div>

JS

// get your root element
const tree = document.querySelector('#content')

// flatten your tree into a list, then pop it to get last text node
const walk = (node = {}, list = []) => {
  // assuming you want the text node's parent node, not the text node itself
  if (/\w{1,}/i.test(node.textContent || '') && node.nodeName !== '#text')
    list.push(node)
  if (node.childNodes) {
    return [...node.childNodes].reduce((acc, child, i) => {
      const branch = walk(child, acc)
      return [...acc, ...branch]
    }, [])
  } else {
    return list
  }
}

// walk through tree to get last non-empty text node
const lastString = walk(tree).pop()

// append it
lastString.innerHTML = lastString.innerHTML + `<b> is last</b>`

// test
console.assert(
  document.getElementById('last').innerHTML === 'b<b> is last</b>',
  'should append span to last text'
)

Answer 2

以下是我解决此问题的方法，逐行JQuery以及稍后的代码段示例。

首先循环每个.content元素：
```
$('.content').each(function(){
```
然后存储在最后一个字符的var中：
```
var ch = $(this).text().trim().slice(-1);
```
现在，因为有时最后一个字符可能只在textNode中而不在.content的子元素中，我们需要区分这个条件，我们可以识别最后一个 nodeText 子元素和实际的最后元素。
```
var lastnode = $(this).contents().last();
var textnode = $(this).contents().filter(function(){
  return this.nodeType === 3 && $.trim(this.nodeValue) !== '';;
}).last();
```
最后，如果最后一个孩子是textNode，我们只需要append() .content 父元素的元素，另外找到:contains我们的最后一个元素存储的字符并执行append()：

＆＃13;

$('.content').each(function(){
  var ch = $(this).text().trim().slice(-1);
  var lastnode = $(this).contents().last();
  var textnode = $(this).contents().filter(function(){
    return this.nodeType === 3 && $.trim(this.nodeValue) !== '';;
  }).last();
  
  if (lastnode[0] == textnode[0]) {
    $(this).append('<span class="end"></span>')
  } else {
    $(this).find(":contains('"+ch+"')").last().append('<span class="end"></span>')
  }
})

＆＃13;

.end {
  width: 10px;
  height: 10px;
  margin:0 5px;
  background: purple;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- plain text -->
<div class="content">
  SIMPLE TEXT.
</div>

<!-- or other html elements -->
<div class="content">
  SIMPLE<span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>b</td>
      <td>b</td>
    </tr>
  </table>
</div>

＆＃13;

Answer 3

要查找最后一个文本，您需要像这样的递归函数

function getLastText(element) {
  if (!element) return null;
  if (element.childNodes && element.childNodes.length > 0) {
    //alert('loop');
    for (var i = element.childNodes.length - 1; i >= 0; i++) {
      var glt = getLastText(element.childNodes[i]);
      if (glt != null) {
        return glt;
      }
    }
  }
  if (element.textContent && element.textContent.length > 0) {
    return element;
  }
  return null;
}

这将返回初始getLastText调用中元素中包含文本的最后一个元素

Answer 4

$('.content :last').append("<span class='end'></span>");

Answer 5

旧答案

~~另一种方法是使用appendTo（）~~

~~$("<span class="end"></span>").appendTo(".content");~~

~~这会将元素附加到具有.content标记的任何内容的结束标记之前。~~

新答案

不是最优雅的解决方案 - 但它可以满足您的需求

<script>
  //Loop each DOM element with a content class
  $(".content").each(function() {
    //Find out what the last Text Character is in the DOM Element
    //and use regex to determine the last position in the inner HTML
    //(Regex excludes tags)
    var positionToInsert = $(this).html().search("(?![^<]*>)" + 
         $(this).text().trim().charAt($(this).text().trim().length-1))+1;

    //Insert the <span> tag at the correct position and save to string 
    var newHtml = [$(this).html().slice(0, positionToInsert), 
                    "<span class='end'></span>",                                                                 
                    $(this).html().slice(positionToInsert)].join('');

    //Reset the HTML for the DOM element to the new string
    $(this).html(newHtml);
  });
</script>

使用jQuery查找最后一个字符

5 个答案: