如何使用JavaScript将HTML段落分割为其文本行

Question

是否有可能(以及如何)使用JavaScript将一段文本拆分为各自的行.我想做的是在段落或块引用的每一行上实现悬挂标点符号,而不仅仅是起始行.

任何其他想法也会受到欢迎!

澄清我被要求对"将一个段落分成各自的行"的含义不那么含糊.

在HTML中,<p>元素创建一个文本块.同样,许多其他元素也是如此.这些文本主体被包装以适应宽度(无论该宽度是由css设置还是由默认设置假定)我似乎无法使用正则表达式或任何其他方法检测换行发生的位置.所以让我们说段落的长度为7行,我希望能够检测到它是7行,以及这些行的开始和结束位置.

寻找一个\n或一个\r似乎没有产生任何东西.

Answer 1

一种蛮力的方法就是将你段落中的所有单词分开并制作span它们.然后,您可以测量offsetTop跨度的属性,以找出哪些最终位于不同的行中.

在下面的代码段中,getLines()返回一个数组数组,其中每个内部数组都包含一行中每个单词的span元素.然后你可以操纵它,因为你希望使用一些CSS创建你的悬挂标点符号,也可以通过插入带有标点符号的绝对定位跨度.

//So it runs after the animation
setTimeout(function(){
    splitLines();
    showLines();
}, 1000)

function showLines() {
  var lines = getLines();
  console.log(
    lines.map(function(line) {
      return line.map(function(span) {
        return span.innerText;
      }).join(' ')
    }));
}

function splitLines() {
  var p = document.getElementsByTagName('p')[0];
  p.innerHTML = p.innerText.split(/\s/).map(function(word) {
    return '<span>' + word + '</span>'
  }).join(' ');
}



function getLines() {
  var lines = [];
  var line;
  var p = document.getElementsByTagName('p')[0];
  var words = p.getElementsByTagName('span');
  var lastTop;
  for (var i = 0; i < words.length; i++) {
    var word = words[i];
    if (word.offsetTop != lastTop) {
      lastTop = word.offsetTop;
      line = [];
      lines.push(line);
    }
    line.push(word);
  }
  return lines;
}

<p>Here is a paragraph that we want to track lines for. Here is a paragraph that we want to track lines for. Here is a paragraph that we want to track lines for Here is a paragraph that we want to track lines for Here is a paragraph that we want to track
  lines for Here is a paragraph that we want to track lines for</p>

这是一个小提琴,你可以调整窗口大小,以便段落改变大小http://jsfiddle.net/4zs71pcd/1/