>  기사  >  웹 프론트엔드  >  javascript_javascript 기술로 간단한 검색과 바꾸기를 구현하는 방법

javascript_javascript 기술로 간단한 검색과 바꾸기를 구현하는 방법

WBOY
WBOY원래의
2016-05-16 15:49:231577검색

이 기사의 예에서는 JavaScript를 사용하여 간단한 검색 및 바꾸기를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

<html>
<head>
<title>中国风</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<script language="JavaScript">
var oldStr;
var newStr;
function searchText(str){
  // 创建TextRange对象,指定为整个body区域
  var myText = document.body.createTextRange();
  if(myText.findText(str)){
    myText.select();
    // 如果找到目标文本,则将其选中
  }else{
    alert("没有找到匹配的字符!");
  }
}
function getTheText(){
  oldStr = prompt("输入要查找的内容","");
  // 获取用户要查找的内容
  if(oldStr!=null){
  // 如果内容不为空,则执行查找
    searchText(oldStr);
  }
}
function replaceText(){
  if(oldStr==null){
    alert("请先进行查找要替换的内容!");
  }else{
    newStr = prompt("替换为","");
    if(newStr!=null){
    // 新文本内容不为空,则替换选中的文本
      var selectText = document.selection.createRange();
      // 选中的文本
      selectText.text = newStr;
      // 替换选中的文本为新文本
    }else{
      alert("请输入替换的内容!");
    }
  }
}
</script>
<body>
<input type="button" value="查找" onclick="getTheText()">
<input type="button" value="替换" onclick="replaceText()">
<pre id="pre">
石壕吏

暮投石壕村,有吏夜捉人。
老翁逾墙走,老妇出门看。
吏呼一何怒!妇啼一何苦!
听妇前致词:三男邺城戍(shù)。
一男附书至,二男新战死。
存者且偷生,死者长已矣!
室中更无人,惟有乳下孙。
有孙母未去,出入无完裙。
老妪力虽衰,请从吏夜归。
急应河阳役,犹得备晨炊。
夜久语声绝,如闻泣幽咽(yè)。
天明登前途,独与老翁别。

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.