选中页面的文字后同步找到 textarea 内的对应文字，并选中和自动滚动到相应位置

最新推荐文章于 2023-02-14 20:35:47 发布
最新推荐文章于 2023-02-14 20:35:47 发布
阅读量805 收藏 1
点赞数 2
分类专栏： js 文章标签： js html web javascript 字符串
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42142603/article/details/109748407
版权

效果图

功能截图

实现代码

  var showPdfView = document.getElementById('showPdfView') //选择的文本
  showPdfView.onclick = function (e) {
    var select_str = getSelectionField(e)
    if (select_str === ''){
      return
    }
    var textarea = document.getElementById('showPdfViewHtml') //最后被标记的文本域
    if (textarea.value.indexOf(select_str) !== -1){

      //    当前选中的文字父节点
      var parent_node = $(window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement)

      parent_node.addClass('select') //标记当前选中的文字所在的节点

      var node_arr = []

      ergodic_ndoe(showPdfView) //遍历所有节点，找到和用户选中文字匹配的所有节点

      //递归遍历元素
      function ergodic_ndoe(node) {
        if(node.nodeType === 1){      //判断是不是元素节点
          if (node.children.length === 0){ //            当前节点的子节点为0个时，判断节点的文本内容是否符合用户所选的字符
            if (node.innerHTML.indexOf(select_str) !== -1){
              var index= -2;//开始查询的位置
              var re = new RegExp(select_str, 'g')
              var arr = node.innerHTML.match(re);
              if (arr.length>1){
//                选中的元素所在的位置
                var position = 0
//                当前选中的节点在文本中的偏移量
                var anchorOffset = window.getSelection().anchorOffset

                for (var i = 0;i<arr.length;i++){
                  index = node.innerHTML.indexOf(select_str, index) + select_str.length;//从下标index开始向后查询
                  if (index === anchorOffset + select_str.length){ //当前匹配的字符串和选中的字符串在当前元素内的偏移量做对比
                    position = i
                  }
                  else if (index === anchorOffset){ //客户从右往左选时偏移量不用加上选中的字符长度
                    position = i
                  }
                }
                node_arr.push({
                  el_select: node, //节点
                  this_all_number: arr.length, //当前节点符合选中的字符的总个数
                  position: position //字符在当前节点的位置
                })
              }
              else {
                node_arr.push({
                  el_select: node,
                  this_all_number: 1,
                  position: 0
                })
              }
            }
          }
          else {  //当前节点的子节点不为零，继续往下找
            for (var i = 0;i<node.children.length;i++){
              ergodic_ndoe(node.children[i])
            }
          }
        }
      }

      var sign = 0 //选中的字符为第几个字符
      for (var j = 0;j< node_arr.length;j++){
        if ($(node_arr[j].el_select).hasClass('select')){
          sign += node_arr[j].position + 1 //统计一直到选中的文字之前还有多少个相同的文字，以确认自己的位置
          $(node_arr[j].el_select).removeClass('select')
          break;
        }
        else {
          sign += node_arr[j].this_all_number
        }
      }

      //右边的对应位置
      var index2 = -2;//开始查询的位置
      var re_r = new RegExp(select_str, 'g')
      var arr_r = textarea.value.match(re_r); //用正则匹配文本域内选中的所有字符

//      判断当前字符在当前节点是否只有一个
      if (arr_r && arr_r.length > 1){
        for (var i = 0;i<arr_r.length;i++){
          index2 = textarea.value.indexOf(select_str, index2) + select_str.length;//从下标index开始向后查询

          //当前字符的位置和选中的字符一致
          if ((i+1) === sign){
            var line_break_str = textarea.value.substring(0,index2);  //截取开始到选中的字符为止
            var line_break_end = textarea.value.substr(index2); //截取选中的字符开始到末尾
            textarea.value = line_break_str //将前半段赋值给文本域
            h1 = textarea.scrollHeight //获取此时的文本域的滚动条高度
            textarea.value = line_break_str + line_break_end //还原文本域的内容
            textarea.scrollTop = h1 - 250 //给滚动条赋值，控制选中的文字到中间，250是当前文本域的高度的一半

            textarea.selectionStart = index2 - select_str.length;
            textarea.selectionEnd = index2
            break;
          }
        }
      }


//     当前字符在当前节点只有一个时，直接定位和选中
      if (index2 === -2){
         line_break_str = textarea.value.substring(0,textarea.value.indexOf(select_str)); //截取开始到选中的字符为止
         line_break_end = textarea.value.substr(textarea.value.indexOf(select_str)); //截取选中的字符开始到末尾
        textarea.value = line_break_str //将前半段赋值给文本域
        var h1 = textarea.scrollHeight //获取此时的文本域的滚动条高度
        textarea.value = line_break_str + line_break_end //还原文本域的内容
        textarea.scrollTop = h1 - 250 //给滚动条赋值，控制选中的文字到中间，250是当前文本域的高度的一半

        textarea.selectionStart = textarea.value.indexOf(select_str); //文本域的选中开始位置
        textarea.selectionEnd = textarea.value.indexOf(select_str) + select_str.length  //文本域的选中结束位置
      }

      textarea.focus(); //给文本域焦点

      //用行数计算滚动条位置（感觉不如上面的方法准确）
//      var line_break_arr = line_break_str.match(/\r|\n/g);  //前面一段的换行符数量
//      textarea.scrollTop = line_break_arr.length * 14 //行数乘以文字大小得到滚动条高度
    }
    else {
      alert('没有找到匹配项，请选中一个连续的字词')
    }
  }

//  获取选中的文字
  function getSelectionField(e) {
    var selection = '';
    selection = getIeSelection(e);
    if (selection == '') {
      selection = getFireFoxSelection(e);
    }
    return selection.replace(/（^\s*）|(\s*$)/g, ""); //  去掉前後空格
  }

  //  获取选中的文字兼容
  function getIeSelection() {
    if (window.getSelection) {
      return window.getSelection().toString();
    }
    else if (document.getSelection) {
      return document.getSelection();
    } else if (document.selection) {
      return document.selection.createRange().text;
    }
  }

  //  获取选中的文字兼容
  function getFireFoxSelection(e) {

    if (e.selectionStart != undefined && e.selectionEnd != undefined) {
      var start = e.selectionStart;
      var end = e.selectionEnd;

      return e.value.substring(start, end);
    } else {
      return "";
    }
  }

model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table class="tblborder" cellspacing="0" cellpadding="0" style="width: 100%;" border="0">
    <tbody>
    <tr>
        <td>
            <form name="form" id="myform" method="post" action="">
                <input type="hidden" value="1" name="direction">
                <input type="hidden" value="2" name="hear_foot">
                <input type="hidden" value="0,0" name="pdf_header_or_footer">
                <input type="hidden" value="486" name="tid">
                <table cellspacing="0" cellpadding="0" width="100%" border="0">
                    <tbody>
                    <tr class="firstalt">
                        <td colspan="3">
                        </td><td colspan="5">
                        <div id="fixedShow">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                <tr class="tbti">
                                    <td width="100%" align="center" style="padding-left:10px;line-height: 40px;">
                                        <button type="button" class="layui-btn layui-btn-sm" onclick="export_pdf()">導出PDF</button>
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                    </tr>
                    <tr class=""><td colspan="6">&nbsp;</td></tr>
                    <tr class="">
                        <td style="width:1%">&nbsp;</td>
                        <td style="width:47%" align="left" valign="top">
                            <div id="showPdfView" class="left"><h2 style="text-align: center;"><span style="font-size: 8px;"><strong><span style="font-family: 黑体;"><span style="font-family: 黑体; font-size: 10px;"></span><htmlpageheader name="myHeader1"></htmlpageheader></span></strong></span></h2><h2 style="text-align: center;"><span style="font-size: 24px;"><strong><span style="font-family: 黑体; font-size: 10px;"><img src="http://www.1ecst.com/tp_ecst/ueditor/php/upload/image/20190726/1564075729299529.png" title="1564075729299529.png" alt="20190723160858.png" style="width: 220px; height: 51px;" width="220" height="51"></span></strong></span></h2><h2 style="text-align: center;"><span style="text-decoration: underline; font-size: 16px;">RECEIPT</span></h2><table><tbody class="select"><tr class="firstRow"><td style="word-break: break-all;" width="165" valign="top"><span style="font-size: 16px;">Customer Name:</span></td><td style="word-break: break-all;" width="411" valign="top"></td><td style="word-break: break-all;" width="104" valign="top"><span style="font-size: 16px;">Date:</span></td><td style="word-break: break-all;" width="228" valign="top">2020-11-04</td></tr><tr><td style="word-break: break-all;" width="164" valign="top"><span style="font-size: 16px;">Contact no:</span></td><td style="word-break: break-all;" width="411" valign="top"></td><td style="word-break: break-all;" width="104" valign="top"><span style="font-size: 16px;">Receipt No:</span></td><td style="word-break: break-all;" width="228" valign="top" align="left">SZ-DN-CONTRACT-0043/20</td></tr><tr><td style="word-break: break-all;" width="165" valign="top"><span style="font-size: 16px;">Email:</span></td><td style="word-break: break-all;" width="411" valign="top"></td><td style="word-break: break-all;" width="104" valign="top"><span style="font-size: 16px;">Our Ref.:</span></td><td style="word-break: break-all;" width="228" valign="top"></td></tr><tr><td style="word-break: break-all;" width="165" valign="top"><span style="font-size: 16px;">Attn.:</span></td><td style="word-break: break-all;" width="411" valign="top"><span style="font-size: 16px;"></span></td><td style="word-break: break-all;" width="104" valign="top"><span style="font-size: 16px;" class="">Your Ref.:</span></td><td style="word-break: break-all;" width="228" valign="top"></td></tr><tr><td style="word-break: break-all;" width="165" valign="top"><span style="font-size: 16px;">Payment Method</span></td><td style="word-break: break-all;" width="411" valign="top" class="">银行转款</td><td style="word-break: break-all;" width="104" valign="top"><span style="font-size: 16px;">Curr.:</span></td><td style="word-break: break-all;" width="228" valign="top">USD</td></tr></tbody></table><p></p><table><tbody><tr class="firstRow"><td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="477" valign="top" align="center">Package</td><td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="90" valign="top" align="center"><span style="font-size: 16px;">QTY</span></td><td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="97" valign="top" align="center">Set</td><td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="123" valign="top" align="center"><span style="font-size: 16px;">Unit Price</span></td><td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="102" valign="top" align="center"><span style="font-size: 16px;">Total</span></td></tr></tbody></table><p>【服務數據】<br></p><hr><table><tbody><tr class="firstRow"><td style="word-break: break-all;" width="975" valign="top" align="right"><span style="text-align: right;">Total:USD</span></td></tr></tbody></table><table><tbody><tr class="firstRow"><td style="word-break: break-all;" width="975" valign="top"><span style="font-size: 16px;" class="select">Thank you for enjoying our service<code>&nbsp;</code></span></td></tr></tbody></table><table><tbody><tr class="firstRow"><td style="word-break: break-all;" width="972" valign="top"><p>Remarks:</p></td></tr></tbody></table><p><span style="font-size: 10px;"><htmlpagefooter name="MyFooter1"></htmlpagefooter></span></p><hr><table data-sort="sortDisabled"><tbody><tr class="firstRow"><td style="word-break: break-all;" width="311" valign="top"><span style="text-decoration: underline;">Signature:<code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code><code>&nbsp;</code> </span><br></td><td width="311" valign="top"><br></td><td style="word-break: break-all;" width="311" valign="top"><span style="text-decoration: underline;">Signature: <code>&nbsp;</code> <code>&nbsp;</code> <code>&nbsp;</code> <code>&nbsp;</code> <code>&nbsp;</code></span><span style="text-decoration: underline;"> <code>&nbsp;</code> <code>&nbsp;</code> <code>&nbsp;</code> <code>&nbsp;</code></span><br></td></tr><tr><td style="word-break: break-all;" width="311" valign="top">Customer:</td><td width="311" valign="top"><br></td><td style="word-break: break-all;" width="311" valign="top">开发test有限公司(勿删)</td></tr><tr><td rowspan="1" colspan="3" style="word-break: break-all;" valign="top" align="center" class="select"><p class="">地址:广东省深圳市宝安区街道2222222 電話:0755-66668888</p><p class="select">Address:Baoan District Street, Shenzhen City, Guangdong Province Tel:0755-66668888<code>&nbsp;</code></p></td></tr></tbody></table><p style="text-align: left;"><span style="font-size: 10px;"><code>&nbsp;</code></span></p><p style="text-align: left;"><br></p></div>
                        </td>
                        <td style="width:1%">&nbsp;</td>
                        <td style="width:50%;position: absolute;" align="left">
                            <!-- <textarea id="showPdfViewHtml" name="showPdfViewHtml" style="width:100%;height:580px;"></textarea> -->
                            <div class="right">
                                <textarea id="showPdfViewHtml" name="tempData" style="width:100%;height:580px;">
                                    <h2 style="text-align: center;">
	<span style="font-size: 8px;">
		<strong>
			<span style="font-family: 黑体;">
				<span style="font-family: 黑体; font-size: 10px;">
				</span>
				<htmlpageheader name="myHeader1">
				</htmlpageheader>
			</span>
		</strong>
	</span>
</h2>
<h2 style="text-align: center;">
	<span style="font-size: 24px;">
		<strong>
			<span style="font-family: 黑体; font-size: 10px;">
				<img src="http://www.1ecst.com/tp_ecst/ueditor/php/upload/image/20190726/1564075729299529.png" title="1564075729299529.png" alt="20190723160858.png" style="width: 220px; height: 51px;" width="220" height="51">
			</span>
		</strong>
	</span>
</h2>
<h2 style="text-align: center;">
	<span style="text-decoration: underline; font-size: 16px;">RECEIPT
	</span>
</h2>
<table>
	<tbody>
		<tr class="firstRow">
			<td style="word-break: break-all;" width="165" valign="top">
				<span style="font-size: 16px;">CustomerName:
				</span>
			</td>
			<td style="word-break: break-all;" width="411" valign="top">
			</td>
			<td style="word-break: break-all;" width="104" valign="top">
				<span style="font-size: 16px;">Date:
				</span>
			</td>
			<td style="word-break: break-all;" width="228" valign="top">2020-11-04
			</td>
		</tr>
		<tr>
			<td style="word-break: break-all;" width="164" valign="top">
				<span style="font-size: 16px;">Contactno:
				</span>
			</td>
			<td style="word-break: break-all;" width="411" valign="top">
			</td>
			<td style="word-break: break-all;" width="104" valign="top">
				<span style="font-size: 16px;">ReceiptNo:
				</span>
			</td>
			<td style="word-break: break-all;" width="228" valign="top" align="left">SZ-DN-CONTRACT-0043/20
			</td>
		</tr>
		<tr>
			<td style="word-break: break-all;" width="165" valign="top">
				<span style="font-size: 16px;">Email:
				</span>
			</td>
			<td style="word-break: break-all;" width="411" valign="top">
			</td>
			<td style="word-break: break-all;" width="104" valign="top">
				<span style="font-size: 16px;">OurRef.:
				</span>
			</td>
			<td style="word-break: break-all;" width="228" valign="top">
			</td>
		</tr>
		<tr>
			<td style="word-break: break-all;" width="165" valign="top">
				<span style="font-size: 16px;">Attn.:
				</span>
			</td>
			<td style="word-break: break-all;" width="411" valign="top">
				<span style="font-size: 16px;">
				</span>
			</td>
			<td style="word-break: break-all;" width="104" valign="top">
				<span style="font-size: 16px;">YourRef.:
				</span>
			</td>
			<td style="word-break: break-all;" width="228" valign="top">
			</td>
		</tr>
		<tr>
			<td style="word-break: break-all;" width="165" valign="top">
				<span style="font-size: 16px;">PaymentMethod
				</span>
			</td>
			<td style="word-break: break-all;" width="411" valign="top">银行转款
			</td>
			<td style="word-break: break-all;" width="104" valign="top">
				<span style="font-size: 16px;">Curr.:
				</span>
			</td>
			<td style="word-break: break-all;" width="228" valign="top">USD
			</td>
		</tr>
	</tbody>
</table>
<p>
</p>
<table>
	<tbody>
		<tr class="firstRow">
			<td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="477" valign="top" align="center">Package
			</td>
			<td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="90" valign="top" align="center">
				<span style="font-size: 16px;">QTY
				</span>
			</td>
			<td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="97" valign="top" align="center">Set
			</td>
			<td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="123" valign="top" align="center">
				<span style="font-size: 16px;">UnitPrice
				</span>
			</td>
			<td style="word-break: break-all; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0);" width="102" valign="top" align="center">
				<span style="font-size: 16px;">Total
				</span>
			</td>
		</tr>
	</tbody>
</table>
<p>【服務數據】
	<br>
</p>
<hr>
<table>
	<tbody>
		<tr class="firstRow">
			<td style="word-break: break-all;" width="975" valign="top" align="right">
				<span style="text-align: right;">Total:USD
				</span>
			</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr class="firstRow">
			<td style="word-break: break-all;" width="975" valign="top">
				<span style="font-size: 16px;">Thankyouforenjoyingourservice
					<code>&nbsp;
					</code>
				</span>
			</td>
		</tr>
	</tbody>
</table>
<table>
	<tbody>
		<tr class="firstRow">
			<td style="word-break: break-all;" width="972" valign="top">
				<p>Remarks:
				</p>
			</td>
		</tr>
	</tbody>
</table>
<p>
	<span style="font-size: 10px;">
		<htmlpagefooter name="MyFooter1">
		</htmlpagefooter>
	</span>
</p>
<hr>
<table data-sort="sortDisabled">
	<tbody>
		<tr class="firstRow">
			<td style="word-break: break-all;" width="311" valign="top">
				<span style="text-decoration: underline;">Signature:
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
				</span>
				<br>
			</td>
			<td width="311" valign="top">
				<br>
			</td>
			<td style="word-break: break-all;" width="311" valign="top">
				<span style="text-decoration: underline;">Signature:
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
				</span>
				<span style="text-decoration: underline;">
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
					<code>&nbsp;
					</code>
				</span>
				<br>
			</td>
		</tr>
		<tr>
			<td style="word-break: break-all;" width="311" valign="top">Customer:
			</td>
			<td width="311" valign="top">
				<br>
			</td>
			<td style="word-break: break-all;" width="311" valign="top">开发test有限公司(勿删)
			</td>
		</tr>
		<tr>
			<td rowspan="1" colspan="3" style="word-break: break-all;" valign="top" align="center">
				<p>地址:广东省深圳市宝安区街道2222222電話:0755-66668888
				</p>
				<p>Address:BaoanDistrictStreet,ShenzhenCity,GuangdongProvinceTel:0755-66668888
					<code>&nbsp;
					</code>
				</p>
			</td>
		</tr>
	</tbody>
</table>
<p style="text-align: left;">
	<span style="font-size: 10px;">
		<code>&nbsp;
		</code>
	</span>
</p>
<p style="text-align: left;">
	<br>
</p>

                                </textarea>
                            </div>
                        </td>
                        <td style="width:1%"> </td>
                    </tr>
                    </tbody>
                </table>
            </form></td>
    </tr>
    </tbody>
</table>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
  var showPdfView = document.getElementById('showPdfView') //选择的文本
  showPdfView.onclick = function (e) {
    var select_str = getSelectionField(e)
    if (select_str === ''){
      return
    }
    var textarea = document.getElementById('showPdfViewHtml') //最后被标记的文本域
    if (textarea.value.indexOf(select_str) !== -1){

      //    当前选中的文字父节点
      var parent_node = $(window.getSelection().getRangeAt(0).commonAncestorContainer.parentElement)

      parent_node.addClass('select') //标记当前选中的文字所在的节点

      var node_arr = []

      ergodic_ndoe(showPdfView) //遍历所有节点，找到和用户选中文字匹配的所有节点

      //递归遍历元素
      function ergodic_ndoe(node) {
        if(node.nodeType === 1){      //判断是不是元素节点
          if (node.children.length === 0){ //            当前节点的子节点为0个时，判断节点的文本内容是否符合用户所选的字符
            if (node.innerHTML.indexOf(select_str) !== -1){
              var index= -2;//开始查询的位置
              var re = new RegExp(select_str, 'g')
              var arr = node.innerHTML.match(re);
              if (arr.length>1){
//                选中的元素所在的位置
                var position = 0
//                当前选中的节点在文本中的偏移量
                var anchorOffset = window.getSelection().anchorOffset

                for (var i = 0;i<arr.length;i++){
                  index = node.innerHTML.indexOf(select_str, index) + select_str.length;//从下标index开始向后查询
                  if (index === anchorOffset + select_str.length){ //当前匹配的字符串和选中的字符串在当前元素内的偏移量做对比
                    position = i
                  }
                  else if (index === anchorOffset){ //客户从右往左选时偏移量不用加上选中的字符长度
                    position = i
                  }
                }
                node_arr.push({
                  el_select: node, //节点
                  this_all_number: arr.length, //当前节点符合选中的字符的总个数
                  position: position //字符在当前节点的位置
                })
              }
              else {
                node_arr.push({
                  el_select: node,
                  this_all_number: 1,
                  position: 0
                })
              }
            }
          }
          else {  //当前节点的子节点不为零，继续往下找
            for (var i = 0;i<node.children.length;i++){
              ergodic_ndoe(node.children[i])
            }
          }
        }
      }

      var sign = 0 //选中的字符为第几个字符
      for (var j = 0;j< node_arr.length;j++){
        if ($(node_arr[j].el_select).hasClass('select')){
          sign += node_arr[j].position + 1 //统计一直到选中的文字之前还有多少个相同的文字，以确认自己的位置
          $(node_arr[j].el_select).removeClass('select')
          break;
        }
        else {
          sign += node_arr[j].this_all_number
        }
      }

      //右边的对应位置
      var index2 = -2;//开始查询的位置
      var re_r = new RegExp(select_str, 'g')
      var arr_r = textarea.value.match(re_r); //用正则匹配文本域内选中的所有字符

//      判断当前字符在当前节点是否只有一个
      if (arr_r && arr_r.length > 1){
        for (var i = 0;i<arr_r.length;i++){
          index2 = textarea.value.indexOf(select_str, index2) + select_str.length;//从下标index开始向后查询

          //当前字符的位置和选中的字符一致
          if ((i+1) === sign){
            var line_break_str = textarea.value.substring(0,index2);  //截取开始到选中的字符为止
            var line_break_end = textarea.value.substr(index2); //截取选中的字符开始到末尾
            textarea.value = line_break_str //将前半段赋值给文本域
            h1 = textarea.scrollHeight //获取此时的文本域的滚动条高度
            textarea.value = line_break_str + line_break_end //还原文本域的内容
            textarea.scrollTop = h1 - 250 //给滚动条赋值，控制选中的文字到中间，250是当前文本域的高度的一半

            textarea.selectionStart = index2 - select_str.length;
            textarea.selectionEnd = index2
            break;
          }
        }
      }


//     当前字符在当前节点只有一个时，直接定位和选中
      if (index2 === -2){
         line_break_str = textarea.value.substring(0,textarea.value.indexOf(select_str)); //截取开始到选中的字符为止
         line_break_end = textarea.value.substr(textarea.value.indexOf(select_str)); //截取选中的字符开始到末尾
        textarea.value = line_break_str //将前半段赋值给文本域
        var h1 = textarea.scrollHeight //获取此时的文本域的滚动条高度
        textarea.value = line_break_str + line_break_end //还原文本域的内容
        textarea.scrollTop = h1 - 250 //给滚动条赋值，控制选中的文字到中间，250是当前文本域的高度的一半

        textarea.selectionStart = textarea.value.indexOf(select_str); //文本域的选中开始位置
        textarea.selectionEnd = textarea.value.indexOf(select_str) + select_str.length  //文本域的选中结束位置
      }

      textarea.focus(); //给文本域焦点

      //用行数计算滚动条位置（感觉不如上面的方法准确）
//      var line_break_arr = line_break_str.match(/\r|\n/g);  //前面一段的换行符数量
//      textarea.scrollTop = line_break_arr.length * 14 //行数乘以文字大小得到滚动条高度
    }
    else {
      alert('没有找到匹配项，请选中一个连续的字词')
    }
  }

//  获取选中的文字
  function getSelectionField(e) {
    var selection = '';
    selection = getIeSelection(e);
    if (selection == '') {
      selection = getFireFoxSelection(e);
    }
    return selection.replace(/\s*/g, "");
  }

  //  获取选中的文字兼容
  function getIeSelection() {
    if (window.getSelection) {
      return window.getSelection().toString();
    }
    else if (document.getSelection) {
      return document.getSelection();
    } else if (document.selection) {
      return document.selection.createRange().text;
    }
  }

  //  获取选中的文字兼容
  function getFireFoxSelection(e) {

    if (e.selectionStart != undefined && e.selectionEnd != undefined) {
      var start = e.selectionStart;
      var end = e.selectionEnd;

      return e.value.substring(start, end);
    } else {
      return "";
    }
  }


</script>
</body>
</html>
星岩星鲤
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JavaScript实现点击自动选择TextArea文本的方法
10-23
主要介绍了JavaScript实现点击自动选择TextArea文本的方法,涉及javascript中focus()、select()方法的使用技巧,非常简单实用,需要的朋友可以参考下
textarea输入框随着内容的增加使滚动条向下滚动
u010007013的博客
08-19 3796
测试给我提了个bug:在textarea输入框下，表情输入多行后，滚动条没有向下滚动。 于是我自己测试了下，如果连续输文字，当超过textarea限制的行数后，滚动条会自动向下滚动。 但是连续输入表情（此时textarea是失去焦点的），我发现当超出textarea限制的行数后，滚动条是不会自动向下滚动的。 我又去看了微博的textarea，发现也是这种情况。PS:不知道是不是微博的测试没有这么变...
获取滚动文本框TextArea焦点位置信息
weixin_30493401的博客
12-26 233
//输入参数：// _mOffset 滚动文本框对象//返回值:// OffsetObject 位置信息对象// length 焦点位置长度// leftValue 滚动文本框从开始到焦点所在位置的文本值// rightValue 滚动文本框从焦点位置到结束的文本值// scrollTop 滚动框位置//更新记录:// 2007-03-16 jiandeh 实现获取焦点...
layer获取textarea的值
weixin_44389107的博客
08-21 2058
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
10-27
在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的操作时，主要涉及两个关键属性：`selectionStart`和`selectionEnd`，以及在IE中使用的`document.selection`对象。 `selectionStart`和`selectionEnd`是...
JavaScript 选中文字并响应获取的实现代码
10-28
当用户在页面上选中一段文字后，通常会在鼠标松开时触发`onmouseup`事件。 下面这段代码展示了如何实现选中文字并响应获取的逻辑： ```javascript function select(o, fn) { o.onmouseup = function(e) { var ...
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
11-21
然而，这两种元素在默认情况下可能会存在一些限制，如`<pre>` 不会自动换行，而`<textarea>` 的高度可能不随内容自动调整。下面我们将详细探讨如何通过CSS和JavaScript来解决这些问题，让这些元素既能自动换行，又能...
js鼠标移动时禁止选中文字
10-20
在JavaScript编程中，有时我们需要禁止用户在网页上通过鼠标选择文字，这可能是因为要保护页面内容不被复制，或是为了优化交互体验。本篇文章将详细讲解如何使用JS和CSS来实现这一功能。 首先，禁止选中文字主要是...
layui 富文本textarea
myydan的专栏
02-14 1582
webman layui textarea 富文本
layui 富文本编辑器和textarea值的相互传递方法
10-16
今天小编就为大家分享一篇layui 富文本编辑器和textarea值的相互传递方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
TextArea的自动滚动，加入各色字体 TabNavigator初始化
糯米猪猪的学习基地
04-20 152
今天做了一个聊天用的面板，到是没用多长时间，就是API不熟，都是一边找资料一边在做，不过现在还是搞定了。把中间很多比较有意思的东西记录下来，以后也好看！ TextArea自动滚动的方法 首先增加事件监听 [code="xml"][/code] 如果TextArea是不可编辑的，就用上面的事件，如果是可以编辑的，就可以用change事件。 然后是方法： [code="ja...
js同步获取文本框textarea输入的内容
weixin_34130269的博客
09-23 1300
教大家怎么实现 同步获取文本框textarea输入的内容 这个js功能 感觉有点像ajax技术 那么先写HTML标签代码 <textarea name="" cols="" rows="" class="loe_hk10" id="eml" onkeyup="SwapTxt()"></textarea> <p id="lyny...
layer ajax 富文本,layui 富文本编辑器和textarea值的相互传递方法
weixin_42363141的博客
08-05 470
layui 富文本编辑器和textarea值的相互传递方法发布时间：2020-10-01 22:47:47来源：脚本之家阅读：478作者：Gino_tkzzz1.富文本编辑器传递值给textarea资讯内容注意:textarea添加lay-verify属性layui.use(['form','layedit'],function(){varform=layui.form,layer=...
layui中的富文本编辑器前端无法取值
Logic_YSY的博客
07-24 3215
遇道了一个前段的bug，就是使用layui中的textarea无论如何也获取不到值，查了半天的文档才搞定，具体代码如下： //html代码如下部分代码 <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">...
js根据name获取input，textarea的值以及判断checkbox是否选中
flysnownet的博客
09-16 9883
需求： 系统配置里有输入框，文本域，开关三种配置项，每一项后有保存按钮，点击保存时获取到该配置强的键值对传到后台 代码示例 {extend name="common/base"} {block name='body-content'} <!-- 以下是正文 --> <div class="layui-body"> ...
JQuery给textarea取值和赋值
热门推荐
青木
11-29 3万+
取值 var sendcontent=$("#sendcontent").val(); 赋值 $("#sendcontent").val(SMScontent); //$("#sendcontent").html(SMScontent);也能赋值，但在ie上被识别为placeholder，点击就会消失
html5 控件赋值,jquery给textarea赋值
weixin_32029321的博客
06-10 1364
html中怎样给textarea赋值？html中给textarea赋值比较常见的方式：1.html中直接书写；2.通过JS动态修改； 第一种：JQuery给textarea取值和赋值:取值 var qrcodefortemcontent=$("#qrcodefortemcontent").val()。赋值 $("#qrcodefortemcontent").val(“123”);。textarea...
qml textarea 增加文字自动显示到最后
最新发布
06-07
可以通过操作 TextArea 的 `text` 和 `cursorPosition` 属性来实现在增加文字时自动滚动到最后。 首先，每次增加文字时，将 `text` 属性设为当前文本加上要增加的文本，然后将 `cursorPosition` 设为文本的长度，就可以将光标自动移动到文本末尾。 例如，可以在 `onTextChanged` 信号处理函数中实现自动滚动： ```qml TextArea { id: textArea onTextChanged: { // 将新文本加到当前文本末尾 var newText = textArea.text + "new text" textArea.text = newText // 将光标移动到文本末尾 textArea.cursorPosition = newText.length } } ``` 这样，每次增加新文本时，TextArea 都会自动滚动到最后。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值