Как я могу получить все текстовые узлы в диапазоне дом? - PullRequest
Новая
       12

Как я могу получить все текстовые узлы в диапазоне дом?

4 голосов
/ 07 октября 2011

Я работаю с редактором в реальном времени и мне нужно найти все текстовые узлы, которые находятся внутри диапазона, выбранного пользователем.

Пример («|» обозначает начальную и конечную точку диапазона выбора): 

<p>Here starts the |selection.</p>
<p>This is fully in the range.</p>
<p>This only |partial.</p>

Как мне найти все эти узлы? (я не хочу находить текстовый узел "Здесь", если в первом абзаце более одного текстового узла! (Их может быть несколько!))

Ответы [ 3 ]

11 голосов
/ 07 октября 2011

Rangy (раскрытие: написано мной) делает это для вас: 

range.getNodes([3]); // 3 is Node.TEXT_NODE

В противном случае, я бы предложил пересмотреть DOM диапазона commonAncestorContainer и для каждого встреченного текстового узла проверить, перекрывает ли он диапазон, создав диапазон для текстового узла (используя selectNode()) и используя его compareBoundaryPoints() метод для сравнения с диапазоном выбора.

4 голосов
/ 07 октября 2011

Предполагая, что вы заинтересованы только в удалении не выделенных текстовых узлов, это может сработать для вас. 

 var selectedTextOfFirstNode = '';
 //for simplicity assuming one selected range
 var range = window.getSelection().getRangeAt(0);
 if (range.startContainer.nodeType == 3)   
     selectedTextOfFirstNode = range.startContainer.textContent
                                           .substring(range.startOffset);

Это дает строку "selection." и оставляет текст, который не выделен.Вы можете сделать то же самое с range.endContainer Теперь вы можете создавать текстовые узлы, используя этот текст, если вас интересуют узлы, а не выделенный текст.

1 голос
/ 04 марта 2014

Эй, firend, попробуйте ниже код 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>payam jabbari</title>
<script src="http://code.jquery.com/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
    var startNode = $('p.first').contents().get(0);
var endNode = $('span.second').contents().get(0);
var range = document.createRange();
range.setStart(startNode, 0);
range.setEnd(endNode, 5);
var selection = document.getSelection();
selection.addRange(range);
// below code return all nodes in selection range. this code work in all browser
var nodes = range.cloneContents().querySelectorAll("*");
for(var i=0;i<nodes.length;i++)
{
   alert(nodes[i].innerHTML);
}
});
</script>
</head>

<body>
<div>

<p class="first">Even a week ago, the idea of a Russian military intervention in Ukraine seemed far-fetched if not totally alarmist. But the arrival of Russian troops in Crimea over the weekend has shown that he is not averse to reckless adventures, even ones that offer little gain. In the coming days and weeks</p>

<ol>
    <li>China says military will respond to provocations.</li>
    <li >This Man Has Served 20 <span class="second"> Years—and May Die—in </span> Prison for Marijuana.</li>
    <li>At White House, Israel's Netanyahu pushes back against Obama diplomacy.</li>
</ol>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...