On a single web page, there are 3 different language words displayed:
Language / 한국어 / ภาษาไทย
I am interested in enlarging the Thai word (ภาษาไทย) to make it stand out.
<span class="thai">ภาษาไทย</span>
While I could add a 'class' property to each Thai section individually, this would be time-consuming.
If possible, I would like to dynamically change the font-family and font-size based on Unicode range using jQuery.
Thank you.
If you want to automatically highlight each Thai word, you can utilize the string.replace() method.
document.body.innerHTML = document.body.innerHTML.replace(
/([\u0E00-\u0E7F]+)/g,
function (x){return '<span class="thai">'+x+'</span>'}
);
Take a look at this JSFiddle example.
While I prefer not to use JQuery, here is an alternative approach:
(For Thai characters, they fall within the Unicode range: 0E00-0E7F)
function StyleThaiInElement(elementType) {
var allElements = document.getElementsByTagName(elementType);
for (var j = 0; j < allElements.length; j++) {
var el = allElements[j];
var charCode = el.innerHTML.charCodeAt(0);
if (0x0E00 <= charCode && charCode <= 0x0E7F) {
// customize element styling
el.style.fontSize = "2em";
//...
}
}
}
// example usage:
StyleThaiInElement('span');
StyleThaiInElement('div');
Feel free to check out the JSFiddle demo.
I'm currently working on creating a collapsible table using MaterialUI. At the moment, all my slides have collapses but they are connected to one state for "open", so when I open one slide, all the other slides also open. Here is an example sandbox t ...
To help my colleagues understand AngularJS, I am creating a dummy exercise. In this example, I want to call a service that provides an Object Array to be passed into a Controller and assigned to a $scope variable (using information about the Beatles). Inst ...
I am currently using a timepicker plugin and am trying to set the last available time option to be 11:59pm. Despite setting the maxTime attribute in my code, the output does not reflect this change. Any suggestions on how to achieve this would be highly ap ...
I came across a helpful guide on setting up a Calendar in HTML using JavaScript You can find it here: Unfortunately, the code I tried to use based on that guide isn't functioning as expected. <div class="row"> <div class="col-lg-4 text ...
I am currently diving into the world of ajax and attempting to create a file uploader using ajax in codeigniter. The issue I am facing is that although the file gets successfully uploaded to the /uploads folder, the response message (alert or image preview ...
My current project involves building a script that iterates through a list, retrieves product SKUs, and includes them in a JSONP request to retrieve an object. The script seems to be functioning as intended, but there are occasional failures. Here is an e ...
Currently, I am utilizing jQuery animate to modify the location of an element: $('#item').animate({'top' : '-50'}, 0); The goal is to set the position without any animations. I experimented with both offset and position, but ...
I'm seeking assistance with my code. I am attempting to retrieve values and then send them to a PHP script via AJAX using jQuery. While I can extract the values, there appears to be an issue that I can't identify. Any help you can offer would be ...
I want to customize the button (down arrow) located in the right corner of the select box. The HTML code is as follows: <div class="buscaSelect"> <select name="oper"> <option value="value1">Value 1</option> < ...
I'm having trouble with a simple CSS fix and can't seem to figure out why. The z-index and overflow visibility properties are not working as expected. I just need 'In Progress' to be displayed above everything else. Some things I' ...
I am working with a model A that has a 1:N association with a model B. My objective is to retrieve all records from A and determine whether there is at least one associated record from B (true) or not (false). The relationship setup: ModelA.hasMany(ModelB ...
I am working with a WordPress blog that has multiple pages with dropdown subpages on hover. However, I only want the main pages to have links, not the subpages. To achieve this, I am using some basic JavaScript. jQuery(document).ready(function(){ jQ ...
I've been experimenting with the Google Maps Directions service to retrieve three different travel methods for the same route (driving, walking, and bicycling). Despite successfully iterating through the array of methods and setting them in the respec ...
Every time I attempt to access /api/file, I am receiving a status code of 404. Here is the relevant code snippet: app.js : ... app.use("/api", require("./routes/users")); app.use("/api", require("./routes/file")); ...
JSONIX 2.0.12 is truly impressive. I am working with a substantial XML file and I am only looking to convert certain elements into JSON format. Whenever I omit some elements from my mapping file, JSONIX throws an unexpected element error during deseriali ...
I'm completely lost here. It seems like there's a reference issue causing all data properties to be overwritten with the value of the last row. I need help figuring out how to iterate over a list of objects, using specific keys to assign data to ...
I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table. Is there a way to achieve this? This is how I implemented it: HTML < ...
I currently have a table that is organized with tbody elements to group rows together. In order to create a grid-like structure, I applied borders to each individual td element within the tbody. However, I also desire to show that the tbodies themselves ar ...
I am looking to modify the options for my line chart. However, when I define the options as shown below, the first series setting gets ignored and only the second series property is applied. var options = { title: 'Temperature Graph ( sampling ev ...
Having some trouble manipulating data from a local JSON file using this technique (no jQuery) as I can't seem to access the object on a global scale: var actual_JSON; function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.o ...