Question

我正在尝试创建一个函数，该函数将采用HTML中的段落，如下所示;

<p>
One<br>
Two<br>
Three<br>
Four<br>
</p>

...并将使用<br>选择可以使用的指定行。类似于下面这个代码段的内容对实现很有帮助，其中1是行号;

function addText() {
    var input = document.getElementById('TARGET');
    input.value = input.value +getLine("SOURCE", 1);
}

有什么想法？谢谢！

Answer 1

如果要逐行获取文本，则不需要break标记。你只需要文本本身的换行符。你可以使用这样的函数：

function getTextByLine(target, line) {
  var text = document.querySelector(target).innerHTML
  return text.trim().split('\n')[line - 1]
}

在jsfiddle here上测试。

更新

如果你想使用break标签，你也可以这样做。

function getTextByLine(target, line) {
  var text = document.querySelector(target).innerHTML
  var lines = text.trim().split('<br>').filter(function(str) {
    return str !== '<br>'
  })
  return lines[line - 1]
}

小提琴here。

Answer 2

实现此目的的一种方法

var para = document.getElementsbyTagName('p')[0];

var lines = para.split('\n')

如果你想要特定的文字，除了你可以进一步指数。

lines[4].split('<br>')[0];

说过你想要达到的方式并不好，你应该上课或类似的东西。

Answer 3

我猜你在DOM中这样做了。如果您有由BR元素拆分的简单文本节点，那么您可以找到第n个BR并将文本附加到它的前一个兄弟节点，它将是前面的文本节点。

您可能希望添加更多逻辑来检查它是否为文本节点，依此类推，但以下显示了基本原则：

＆＃13;

/* Modify the text at line index of P with lines separated
** by BR elements.
** Line numbers start from 1.
** @param {number} index - line number to modify
** @param {string} text - text to append to line
*/
function insertText(index, text) {

  // Get the lines
  var p = document.getElementsByTagName('p')[0];
  var brs = p.getElementsByTagName('br');
  var node;
  
  // Check index is in range
  if (index < 1 || index > brs.length - 1) {
    alert('Line number must be integer from 1 to ' + (brs.length - 1));
    return;
  }

  // Append the text
  node = brs[index - 1].previousSibling;
  node.nodeValue += text; 
}

＆＃13;

<p>
One<br>
Two<br>
Three<br>
Four<br>
</p>

<form onsubmit="insertText(this.lineNo.value, this.theText.value); return false;">
<br>Add this text:<input id="theText"> to line <input id="lineNo">.
<br><button onclick="">Insert text</button>
</form>

＆＃13;

使用<br/>提取段落的第n行

3 个答案:

更新