اذهب إلى المحتوى
  • 0

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

Mari Carmen

السؤال

Recommended Posts

  • 0

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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);

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...