Javascript 使用jQuery查找最后一个字符

我有一个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:last'）。追加（“”）；

旧答案

另一种方法是使用appendTo（）

$（“”）的.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>

//使用内容类循环每个DOM元素
$（“.content”）.each（函数（）{
//找出DOM元素中最后一个文本字符是什么
//并使用正则表达式确定内部HTML中的最后一个位置
//（正则表达式不包括标记）
var positionToInsert=$（this.html（）.search（（？！[^）”+
$（this.text（）.trim（）.charAt（$（this.text（）.trim（）.length-1））+1；
//在正确的位置插入标记并保存到字符串
var newHtml=[$（this.html（）.slice（0，positionToInsert），
"",                                                                 
$（this.html（）.slice（positionToInsert）].join（“”）；
//将DOM元素的HTML重置为新字符串
$（this.html（newHtml）；
});

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

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调用中包含文本的最后一个元素，通过元素递归以获取最后一个文本节点

简单文本。
1.
2.
A.
B

js

//获取根元素
const tree=document.querySelector（“#content”）
//将树展平为列表，然后将其弹出以获取最后一个文本节点
const walk=（node={}，list=[]）=>{
//假设您想要文本节点的父节点，而不是文本节点本身
if（/\w{1，}/i.test（node.textContent | |“”）和&node.nodeName！='.#text'）
列表推送（节点）
if（node.childNodes）{
return[…node.childNodes].reduce（（acc，child，i）=>{
const branch=步行（儿童，acc）
返回[…acc，…分支机构]
}, [])
}否则{
返回列表
}
}
//遍历树以获取最后一个非空文本节点
const lastString=walk（tree）.pop（）
//附加它
lastString.innerHTML=lastString.innerHTML+`是最后一个`
//试验
console.assert(
document.getElementById（'last'）。innerHTML=='b是last'，
'应将跨度附加到最后一个文本'
)

以下是我解决这个问题的方法，JQuery逐行介绍，后面是代码片段示例

• 通过每个

  .content

  元素的第一个循环：

  $('.content').each(function(){
  

• 然后将最后一个字符存储在变量中：

  var ch = $(this).text().trim().slice(-1);
  

• 现在，由于有时最后一个字符可能只在textNode中，而不在

  .content

  的子元素中，我们需要区分这种情况，我们可以识别最后一个nodeText子元素和实际的最后一个元素

• 最后，如果最后一个子元素是textNode，我们只需要将元素

  附加到.content父元素中，否则找到
  ：包含存储字符的最后一个元素，然后执行
  附加（）
  ：
  

$（'.content'）。每个（函数（）{
var ch=$（this.text（）.trim（）.slice（-1）；
var lastnode=$（this.contents（）.last（）；
var textnode=$（this.contents（）.filter（function（））{
返回this.nodeType===3&&$.trim（this.nodeValue）！==''；；
}).last（）；
if（lastnode[0]==textnode[0]）{
$（this.append（“”）
}否则{
$（this.find（“：contains（“+ch+”））”）.last（）.append（“”）
}
})

.end{
宽度：10px；
高度：10px；
利润率：0.5px；
背景：紫色；
显示：内联块；
}

简单文本。
SIMPLETEXT。
1.
2.
B
B

它基于最后一个字符，而不是@ControlAltDel所说的最后一个TDE:）这也假设我有

tr

元素…我更新了我的问题以使其更清楚…你应该为你发布的代码提供一些解释。但我想把它附加到最后一个字符，而不是最后一个元素。用c更新了答案ustom解决方案。谢谢除了将元素附加到最后一个可读字符之外，文档是否保持静态？如果是静态的，是否可以为最后一个具有可编辑字符的元素提供一个类，并使用grimdog_john的解决方案。太棒了！接受了这一点，因为所有的解释和嵌入的代码片段！；）这只适用于他说，你实际上有一个html，里面有额外的内容，因为textnode失败了

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;
}

<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>

// 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'
)

$('.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();