html +JavaScript البحث من فقره

Mari Carmen · 27 نوفمبر 2020

- The border styles in the list are: solid, dashed and dotted.

- By clicking on “Create the styled paragraph“, you should insert the text ( in the text area) in a paragraph below with the selected style properties.

- By clicking on search (after putting a word to look for it), the paragraph that appeared below should highlight every matched word in it. If it is not exist it should display below that the word does not exist.

- By clicking on “Clear Search” you should remove all the highlights that appear on it from the last searching process.

- You should display the web page in a very similar way to the above suggestion.

كيف ممكن اعدل على كود اني ابحث عن كلمة موجوده ب text area وكيف ممكن اعمل شكل كما في صوره

<!DOCTYPE html>
<html>
<head>
<style>
aside {
float: left;
  padding: 20px;
  width: 70%;
  
  height: 300px
}

section:after {
  content: "";
  display: table;
  clear: both;
}


footer {
  
  padding: 10px;
  text-align: center;
  color: white;
}

</style>
</head>
<body>

<header>
  <textarea id="TextEditor" rows="30" cols="50" placeholder="Copy and Paste a text here ..."></textarea>
</header>

<section>
  <h1>Styling a paragraph</h1>
  <label for="textcolor">Text Color:</label>
<input type="color" id="textcolor" value="#ff0000"><br>

<label for="backgroundcolor">Background Color:</label>
<input type="color" id="backgroundcolor" value="#ff0000"><br>

<input type="radio" value="1" checked="checked">With Border<br>
<input type="radio" value="0">Without Border<br>

<label for="bordercolor">Border Color:</label>
<input type="color" id="bordercolor" value="#ff0000"><br>

<input type="button" value="Create the styled button">
<aside>
  <h1>Searching for a text</h1>
</aside>
</section>



<footer>
  
<div id="Results"></div>

</footer>
<script>
     document.querySelector('input[type = button]').addEventListener("click", function(){
    document.getElementById("Results").innerHTML = document.getElementById("TextEditor").value;
    if(document.querySelector('input[type = radio]:checked').value === 1){
        document.getElementById("Results").style.border = "thick solid "+document.getElementById("bordercolor").value;
    }
    document.getElementById("Results").style.color = document.getElementById("textcolor").value;
    document.getElementById("Results").style.backgroundColor = document.getElementById("backgroundcolor").value;
});


</script>


</body>
</html>

كريم أمعطيل · 29 نوفمبر 2020

بتاريخ 22 ساعات قال Mari Carmen:

نعم لكن لم اتمكن من البحث عن كلمة بل فقره

تفضل هذا هو الكود الكامل حيث أضفت به خاصية البحث وتفريغ البحث

<!DOCTYPE html>
<html>
<head>
<style>


</style>
</head>
<body>

<header>
  <textarea id="TextEditor" rows="30" cols="50" placeholder="Copy and Paste a text here ..."></textarea>
</header>

<section>
  <h1>Styling a paragraph</h1>
  <label for="textcolor">Text Color:</label>
<input type="color" id="textcolor" value="#ffffff"><br>

<label for="backgroundcolor">Background Color:</label>
<input type="color" id="backgroundcolor" value="#ff0000"><br>

<input type="radio" name="border" value="1">With Border<br>
<input type="radio" name="border" value="0">Without Border<br>

<label for="bordercolor">Border Color:</label>
<input type="color" id="bordercolor" value="#000000"><br>

<input type="button" onclick="StylePara()" value="Create the styled button">
<aside>
  <h1>Searching for a text</h1>
  <label for="findword">Text Color:</label>
  <input type="text" id="findword"><br>

  <input type="button" onclick="SearchPara()" value="Search">
  <input type="button" onclick="ClearSearch()" value="Clear Search">
  
</aside>
</section>



<footer>
  
<div id="Results"></div>

</footer>
<script>
function StylePara() {
    document.getElementById("Results").innerHTML = document.getElementById("TextEditor").value;
    if(document.querySelector('input[type=radio]:checked').value === '1'){
        document.getElementById("Results").style.border = "thick solid "+document.getElementById("bordercolor").value;
    }else if(document.querySelector('input[type=radio]:checked').value === '0'){
      document.getElementById("Results").style.border = "none";
    }
    document.getElementById("Results").style.color = document.getElementById("textcolor").value;
    document.getElementById("Results").style.backgroundColor = document.getElementById("backgroundcolor").value;
}

function ClearSearch(){
  var opar = document.getElementById('Results').innerHTML;
  var paragraph = document.getElementById('Results');

  paragraph.innerHTML = opar.replace('<mark>','').replace('</mark>','');
}

function SearchPara() {
  ClearSearch();
  var opar = document.getElementById('Results').innerHTML;
  var paragraph = document.getElementById('Results');
  var search = document.getElementById('findword').value;
  search = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

  var re = new RegExp(search, 'g');
  var m;

  if (search.length > 0)
    paragraph.innerHTML = opar.replace(re, `<mark>$&</mark>`);
  else paragraph.innerHTML = opar;
}


</script>


</body>
</html>

بالتوفيق

إياد الاسماعيل · 27 نوفمبر 2020

هل شاهدت الإجابات الموجودة هنا؟

Mari Carmen · 28 نوفمبر 2020

نعم لكن لم اتمكن من البحث عن كلمة بل فقره

html +JavaScript البحث من فقره

السؤال

Mari Carmen

3 أجوبة على هذا السؤال

Recommended Posts

كريم أمعطيل

إياد الاسماعيل

Mari Carmen

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية