التعديل على النصوص وتنسيقها باستخدام html +JavaScript

سنحتاج بداية إنشاء حقل يُوضع النص المٌراد التعديل عليه بداخله ونعطيه تعريف خاص به, طريقة الإضافة تكون عبر الكود :

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

ثم نضيف حقول التعديل على النص :

<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">

ثم نضيف صندوق في الأسف لإظهار النص المٌعدل فيه 

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

وأخر مهمة هي إضافة كود javascript يقوم بتطبيق التعديلات عن الضغط على زر التعديل

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;
});

كيف يمكني ان ابحث عن كلمة داخل الفقره 

بتاريخ 43 دقائق مضت قال Mari Carmen:

كيف يمكني ان ابحث عن كلمة داخل الفقره 

يمكنك إنشاء بحث عن طريق input داخل فقره ما عن طريق هذا الكود :

كود html :

<div id="pra" style="display: none;"> <!--الفقرة التي سوف يتم البحث عن كلمة داخلها وسوف تعدل مساراها لديك حسب ما تشاء-->
  A paragraph is a series of sentences that are organized and coherent, and are all related to a single topic. Almost every piece of writing you do that is longer than a few sentences should be organized into paragraphs. ... Paragraphs can contain many different kinds of information.
</div>
<div id="container">
 	<div class="header">
		<input type="text" placeholder="Search text here ..." name="query" id="query-input"> <!--مدخل البحث-->
  	</div>
 	<ul id="lists" class="lists"><!--سوف يظهر ناتج البحث هنا من جديد وسوف تظهر كلمات البحث بلون اصفر خلفي-->
    </ul>
</div>

كود javascript :

const TIME_OUT = 500;
let input = document.querySelector('#query-input');
let lists = document.querySelector('#lists');
let string = document.getElementById("pra"); /*هذا مسار البجث الذي سوف يتم تغيرة بمسار أخر لديك*/
let texts = [string.innerHTML];
console.log(texts);

let _buildTexts = () =>{
  
  let html = texts.map((text)=>{
    return `<li>${text}</li>`
  });

  lists.innerHTML = html.join('');  
};

_buildTexts();

// Not an arrow function, to avoid lexical scope binding
function _buildSearchedTexts(){
  console.log(this);
  let newTexts = texts.map((text)=>{
    let newText = text.replace(new RegExp(this.value, "gi"), (match) => `<mark>${match}</mark>`);
    return `<li>${newText}</li>`;
  });
  lists.innerHTML = newTexts.join('');
};


let debounce = (callback, wait) => {
	
  let timeout = null;
  
	return function() {
		let context = this; 
    let args = arguments;
		let later = () => {
      callback.apply(context, args)
		};
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
	};
};

function keyPressCallback() {
  if(!this.value){
    _buildTexts();
    return;
  };
  _buildSearchedTexts.bind(this)();
}

input.onkeydown = debounce(keyPressCallback, TIME_OUT);