JavaScript で数値を3桁の,区切りの文字列に変換する方法のメモ。
1. 正規表現を利用
> a = 123456789; > String(a).replace(/\B(?=(\d{3})+(?!\d))/g, ","); '123,456,789'
2. toLocaleString() を利用
> a = 123456789; > a.toLocaleString(); '123,456,789'
> a = 123456789; > String(a).replace(/\B(?=(\d{3})+(?!\d))/g, ","); '123,456,789'
> a = 123456789; > a.toLocaleString(); '123,456,789'
<!DOCTYPE html><html><head><link href="https://cdn.jsdelivr.net/npm/quill@2.0.1/dist/quill.snow.css" rel="stylesheet" /><script src="https://cdn.jsdelivr.net/npm/quill@2.0.1/dist/quill.js"></script><title>Quill</title></head><body><form></form><button onclick="show_contents()">submit</button>
<script type="text/javascript">function show_contents() {document.getElementById('editor-contents').innerHTML = quill.getSemanticHTML();console.log(JSON.stringify(quill.getContents()));}const options = {theme: 'snow',placeholder: '本文を入力してください',modules: {toolbar: [['bold', 'italic', 'link']],},};const quill = new Quill('#editor', options);</script></body></html>
{"ops": [{"insert":"aaa\n"},{"attributes":{"bold":true},"insert":"bbb"},{"insert":"\n"},{"attributes":{"italic":true,"bold":true}, "insert":"ccc"},{"insert":"\n"},{"attributes":{"link":"https://www.goo.ne.jp/"},"insert":"ddd"},{"insert":"\neee\n"}]}
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>image processing</title> </head> <body> 画像処理 <div id="img_area"></div> </body> &;lt;script type="text/javascript"> (() => { function draw_image(params) { const img_area_obj = document.getElementById(params.img_area); const img_obj = params.img_obj; const cv_obj = document.createElement('canvas'); cv_obj.width = img_obj.naturalWidth; cv_obj.height = img_obj.naturalHeight; const ct = cv_obj.getContext('2d'); ct.drawImage(img_obj, 0, 0); img_area_obj.appendChild(cv_obj); const img_data = ct.getImageData(0, 0, img_obj.width, img_obj.height); // 枠 draw_cell_frame(ct, img_data, 16); } function draw_cell_frame(ct, img_data, size) { for (let y = 0; y < img_data.height; y += size) { for (let x = 0; x < img_data.width; x += size) { let avg_col = avg_cell_color(img_data, x, y, size); ct.strokeStyle = `#${avg_col[0]}${avg_col[1]}${avg_col[2]}`; ct.strokeRect(x, y, size, size); } } } function avg_cell_color(img_data, min_x, min_y, size) { const w = img_data.width; const h = img_data.height; const max_x = min_x + size <= w ? min_x + size : w; const max_y = min_y + size <= h ? min_y + size : h; let sum_r = 0, sum_g = 0, sum_b = 0; let pixels = 0; for (let y = min_y; y < max_y; y++) { for (let x = min_x; x < max_x; x++) { pixels++; let r = img_data.data[(x + y*w)*4]; let g = img_data.data[1 + (x + y*w)*4]; let b = img_data.data[2 + (x + y*w)*4]; sum_r += r; sum_g += g; sum_b += b; } } const avg_r = Math.floor(sum_r / pixels); const avg_g = Math.floor(sum_g / pixels); const avg_b = Math.floor(sum_b / pixels); return [avg_r.toString(16), avg_g.toString(16), avg_b.toString(16)]; } function read_image(params) { const img_obj = new Image(); params.img_obj = img_obj; img_obj.onload = (() => { draw_image(params); }); img_obj.src = params.img_url; } read_image({ img_area: 'img_area', img_url: 'test.png', }); })(); </script> </html>
<html> <head> <title>script</title> </head> <body> </body> <script type="text/javascript" src="script1.js"></script> </html>
const script_url = document.currentScript.src; console.log('script url:' + script_url); const url_obj = new URL(script_url) console.log('origin: ' + url_obj.origin);
script url: http://localhost/script/script1.js origin: http://localhost
<div id="d1"> <div id="d2-1"> <div id="d3-1"> <p id="p4-1">p4-1 text</p> <p id="p4-2">p4-2 text</p> </div> <div id="d3-2"></div> </div> <div id="d2-2"> <div id="d3-3"></div> <div id="d3-4"></div> </div> </div> </div>
$(`<div id="d2-3"></div>`).appendTo($('#d1')); console.log($('#d1').html()); --> <div id="d2-1"> <div id="d3-1"> <p id="p4-1">p4-1 text</p> <p id="p4-2">p4-2 text</p> </div> <div id="d3-2"></div> </div> <div id="d2-2"> <div id="d3-3"></div> <div id="d3-4"></div> </div> <div id="d2-3"></div>
$(`<div id="d2-0"></div>`).insertBefore($('#d2-1')); console.log($('#d1').html()); --> <div id="d2-0"></div><div id="d2-1"> <div id="d3-1"> <p id="p4-1">p4-1 text</p> <p id="p4-2">p4-2 text</p> </div> <div id="d3-2"></div> </div> <div id="d2-2"> <div id="d3-3"></div> <div id="d3-4"></div> </div>
$('#d3-1').remove(); console.log($('#d1').html()); --> <div id="d2-1"> <div id="d3-2"></div> </div> <div id="d2-2"> <div id="d3-3"></div> <div id="d3-4"></div> </div>
$('#d3-1').empty(); console.log($('#d1').html()); --> <div id="d2-1"> <div id="d3-1"></div> <div id="d3-2"></div> </div> <div id="d2-2"> <div id="d3-3"></div> <div id="d3-4"></div> </div>
$('#d3-1').children().each((i, node) => { console.log($(node).text()); }); --> p4-1 text p4-2 text
<div id="d1"> <div id="d2-1"> <div id="d3-1"> <p id="p4-1">p4-1 text</p> <p id="p4-2">p4-2 text</p> </div> <div id="d3-2"></div> </div> <div id="d2-2"> <div id="d3-3"></div> <div id="d3-4"></div> </div> </div> </div>
d = $('#d1'); console.log(d.attr('id')); console.log(d.constructor.name); --> d1 S
ns = $('#d1 > div'); console.log(ns.length); console.log(ns[0].constructor.name); console.log($(ns[0]).attr('id')); console.log($(ns[1]).attr('id')); --> 2 HTMLDivElement d2-1 d2-2
ps = $('#d1 p'); console.log(ps.length); console.log(ps[0].constructor.name); console.log($(ps[0]).text()); console.log($(ps[1]).text()); --> 2 HTMLParagraphElement p4-1 text p4-2 text
ps = $('#d1 p'); console.log(ps.length); console.log($(ps[0]).text()); console.log($(ps[1]).text()); --> 2 p4-1 text p4-2 text
d = $('#d1'); ps = d.find('p'); console.log(ps.length); console.log($(ps[0]).text()); console.log($(ps[1]).text()); --> 2 selector1.html:82 p4-1 text selector1.html:83 p4-2 text
console.log('前の要素'); d = $('#d2-2').prev(); console.log($(d).attr('id')); --> d2-1
d = $('#d2-1').next(); console.log($(d).attr('id')); --> d2-2
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>test1</title> </head> <body> <h3>jQuery でのイベント処理</h3> <table border="1"> <tbody> <tr> <td><input type="text" name="memo"></td> <td><input type="button" name="add" value="追加"></td> </tr> </tbody> </table> </body> <script type="text/javascript" src="jquery-3.6.0.min.js"></script> <script type="text/javascript"> function add_row(btn) { const new_row = $(` <tr> <td><input type="text" name="memo"></td> <td> <input type="button" name="add" value="追加"> <input type="button" name="del" value="削除"> </td> </tr> `); // ボタンが押された行の直後の行に追加 const row = btn.parent().parent(); new_row.insertAfter(row); // イベントハンドラ: 追加 const add_btn = new_row.find('input[name="add"]'); add_btn.click(() => { add_row(add_btn); }); // イベントハンドラ: 削除 const del_btn = new_row.find('input[name="del"]'); del_btn.click(() => { del_row(del_btn); }); } function del_row(btn) { // ボタンが押された行を削除 const row = btn.parent().parent(); row.remove(); } (() => { const add_btn = $('input[name="add"]'); add_btn.click(() => { add_row(add_btn); }); })(); </script> </body> </html>
<html> <head> <meta http-equiv="Content-Type" content="text/html;utf-8"> <title>graph</title> </head> <body> <div id="graph"></div> <script type="text/javascript" src="../d3.min.js"></script> <script type="text/javascript"> const org_dataset = [ ['01/01', 4], ['01/02', 5], ['01/03', 8], ['01/04', 10], ['01/05', 9], ['01/06', 12], ['01/07', 8], ['01/08', 7], ['01/09', 6], ['01/10', 8], ]; const dataset = []; for (let i = 0; i < org_dataset.length; i++) { let d = org_dataset[i]; dataset.push({date: d[0], x: i, y: d[1]}); } const width = 600; const height = 400; const margin = { "top": 40, "bottom": 40, "right": 40, "left": 40 }; const svg = d3.select("body") .append("svg") .attr("width", margin.left+width+margin.right) .attr("height", margin.top+height+margin.bottom) ; var xScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d.x; })]) .range([margin.left, margin.left+width]) ; var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d.y; })]) .range([margin.top+height, margin.top]) ; var xAxis = d3.axisBottom(xScale) .ticks(5) .tickFormat((d) => { return dataset[d].date; }) ; var yAxis = d3.axisLeft(yScale) .ticks(5); svg.append("g") .attr("transform", "translate(" + [0, margin.top+height].join(",") + ")") .call(xAxis) .append("text") .attr("fill", "black") .attr("x", (margin.left+width+margin.right)/2) .attr("y", margin.bottom/2) .attr("text-anchor", "middle") .attr("font-size", "10pt") .text("日付"); svg.append("g") .attr("transform", "translate(" + [margin.left, 0].join(",") + ")") .call(yAxis) .append("text") .attr("fill", "black") .attr("text-anchor", "middle") .attr("x", -(height+margin.top+margin.bottom)/2) .attr("y", -margin.left/2) .attr("transform", "rotate(-90)") .attr("font-size", "10pt") .text("値"); svg.append("path") .datum(dataset) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", d3.line() .x(function(d) { return xScale(d.x); }) .y(function(d) { return yScale(d.y); }) ); </script> </body> </html>
<html> <head> <title>graph</title> </head> <body> <script type="text/javascript" src="../d3.min.js"></script> <script type="text/javascript"> const org_dataset = [ ['01/01', 4], ['01/02', 5], ['01/03', 8], ['01/04', 10], ['01/05', 9], ['01/06', 12], ['01/07', 8], ['01/08', 7], ['01/09', 6], ['01/10', 8], ]; const dataset = []; for (let i = 0; i < org_dataset.length; i++) { let d = org_dataset[i]; dataset.push({date: d[0], x: i, y: d[1]}); } const width = 600; const height = 400; const margin = { "top": 40, "bottom": 40, "right": 40, "left": 40 }; const svg = d3.select("body") .append("svg") .attr("width", margin.left+width+margin.right) .attr("height", margin.top+height+margin.bottom) ; var xScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d.x; })]) .range([margin.left, margin.left+width]) ; var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d.y; })]) .range([margin.top+height, margin.top]) ; var xAxis = d3.axisBottom(xScale) .ticks(5) .tickFormat((d) => { return dataset[d].date; }) ; var yAxis = d3.axisLeft(yScale) .ticks(5); svg.append("g") .attr("transform", "translate(" + [0, margin.top+height].join(",") + ")") .call(xAxis) .append("text") .attr("fill", "black") .attr("x", (margin.left+width+margin.right)/2) .attr("y", margin.bottom/2) .attr("text-anchor", "middle") .attr("font-size", "10pt") .text("日付"); svg.append("g") .attr("transform", "translate(" + [margin.left, 0].join(",") + ")") .call(yAxis) .append("text") .attr("fill", "black") .attr("text-anchor", "middle") .attr("x", -(height+margin.top+margin.bottom)/2) .attr("y", -margin.left/2) .attr("transform", "rotate(-90)") .attr("font-size", "10pt") .text("値"); svg.append("path") .datum(dataset) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", d3.line() .x(function(d) { return xScale(d.x); }) .y(function(d) { return yScale(d.y); }) ); </script> </body> </html>
svg.append("g") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function (d) { return xScale(d[0]); }) .attr("cy", function (d) { return yScale(d[1]); }) .attr("r", 10) .attr("fill", function (d) { return "rgba(0, 0, " + Math.round(colorScale(d[2])) + ", 0.8)"; }) .on("mouseover", function (e) { const d = e.target.__data__; console.log(e); tooltip .style("left", e.x + 30 + 'px') .style("top", e.y + 'px') .html( "id: " + d[3] + "" + "[" + d[0] + ", " + d[1] + "]" + "" + "value: " + d[2] ) .style("opacity", 1) ; }) .on("mouseout", function (e) { tooltip .style("opacity", 0) ; }) .on("click", function (e) { const d = e.target.__data__; console.log(e); }) ;
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>script</title> </head> <body> <div>123</div> <script type="text/javascript"> var e = document.currentScript; var c = document.createElement('div') c.innerText = 'def'; e.parentNode.append(c); </script>456</body> </html>
const tooltip = d3.select("#scatter") .append("div") .style("position", "absolute") .style("text-align", "left") .style("background", "#ffffff") .style("border", "1px solid #000000") .style("padding", "10px") .style("opacity", 0) ; svg.append("g") .selectAll("circle") .data(dataset) .enter() .... .on("mouseover", function (e) { const d = e.target.__data__; tooltip .style("left", e.x + 30 + 'px') .style("top", e.y + 'px') .html( "id: " + d[3] + "" + "[" + d[0] + ", " + d[1] + "]" + "" + "value: " + d[2] ) .style("opacity", 1) ; }) .on("mouseout", function (d) { tooltip .style("opacity", 0) ; }) ;
<html> <head> <title>d3.js test</title> </head> <body> d3.js test <script src="../d3.min.js"></script> <script type="text/javascript"> const dataset = [ [0.0, 0.0, 0.0, "p00"], [1.0, 2.0, 0.1, "p01"], [1.5, 4.0, 0.2, "p02"], [2.0, 1.5, 0.3, "p03"], [1.5, 4.0, 0.4, "p04"], [2.5, 3.5, 0.5, "p05"], [1.0, 4.0, 0.6, "p06"], [1.5, 3.5, 0.7, "p07"], [0.5, 2.0, 0.8, "p08"], [1.0, 2.5, 0.9, "p09"], [1.5, 1.0, 1.0, "p10"], ]; const width = 800; const height = 600; const margin = {"top": 30, "bottom": 30, "right": 30, "left": 30}; const svg = d3.select("#scatter") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) ; const xScale = d3.scaleLinear() .domain([0, d3.max(dataset, function (d) { return d[0]; })]) .range([margin.left, margin.left + width]) ; const yScale = d3.scaleLinear() .domain([d3.max(dataset, function (d) { return d[1]; }), 0]) .range([margin.bottom, margin.bottom + height]) ; svg.append("g") .attr("class", "x_axis") .attr("transform", "translate(" + [0, height + margin.top].join(",") + ")" ) .call(d3.axisBottom(xScale).ticks(0.5) ); svg.append("g") .attr("class", "y_axis") .attr("transform", "translate(" + [margin.left, 0].join(",") + ")" ) .call(d3.axisLeft(yScale).ticks(0.5) ); const colorMax = 255; const colorMin = 80; const colorScale = d3.scaleLinear() .domain([d3.min(dataset, function (d) { return d[2]; }) , d3.max(dataset, function (d) { return d[2]; })]) .range([colorMin, colorMax]) ; const tooltip = d3.select("#scatter") .append("div") .style("position", "absolute") .style("text-align", "left") .style("background", "#ffffff") .style("border", "1px solid #000000") .style("padding", "10px") .style("opacity", 0) ; svg.append("g") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function (d) { return xScale(d[0]); }) .attr("cy", function (d) { return yScale(d[1]); }) .attr("r", 10) .attr("fill", function (d) { return "rgba(0, 0, " + Math.round(colorScale(d[2])) + ", 0.8)"; }) .on("mouseover", function (e) { const d = e.target.__data__; console.log(e); tooltip .style("left", e.x + 30 + 'px') .style("top", e.y + 'px') .html( "id: " + d[3] + "" + "[" + d[0] + ", " + d[1] + "]" + "" + "value: " + d[2] ) .style("opacity", 1) ; }) .on("mouseout", function (d) { tooltip .style("opacity", 0) ; }) ; </script> </body> </html>
<html> <head> <title>d3.js test</title> </head> <body> d3.js test <script src="../d3.min.js"></script> <script type="text/javascript"> const dataset = [ // x, y, 値, ID [0.0, 0.0, 0.0, "p00"], [1.0, 2.0, 0.1, "p01"], [1.5, 4.0, 0.2, "p02"], [2.0, 1.5, 0.3, "p03"], [1.5, 4.0, 0.4, "p04"], [2.5, 3.5, 0.5, "p05"], [1.0, 4.0, 0.6, "p06"], [1.5, 3.5, 0.7, "p07"], [0.5, 2.0, 0.8, "p08"], [1.0, 2.5, 0.9, "p09"], [1.5, 1.0, 1.0, "p10"], ]; const width = 800; const height = 600; const margin = {"top": 60, "bottom": 30, "right": 30, "left": 60}; const xScale = d3.scaleLinear() .domain([0, d3.max(dataset, function (d) { return d[0]; })]) .range([margin.left, margin.left + width]) ; const yScale = d3.scaleLinear() .domain([d3.max(dataset, function (d) { return d[1]; }), 0]) .range([margin.top, margin.top + height]) ; const svg = d3.select("#scatter") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) ; svg.append("g") .attr("class", "x_axis") .attr("transform", "translate(" + [0, margin.top + height].join(",") + ")" ) .call(d3.axisBottom(xScale)) ; svg.append("g") .attr("class", "y_axis") .attr("transform", "translate(" + [margin.left, 0].join(",") + ")" ) .call(d3.axisLeft(yScale)) ; const colorMax = 255; const colorMin = 80; const colorScale = d3.scaleLinear() .domain([d3.min(dataset, function (d) { return d[2]; }) , d3.max(dataset, function (d) { return d[2]; })]) .range([colorMin, colorMax]) ; svg.append("g") .selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function (d) { return xScale(d[0]); }) .attr("cy", function (d) { return yScale(d[1]); }) .attr("r", 7) .attr("fill", function (d) { return "rgba(" + Math.round(colorScale(d[2])) + ", 0, 0, 0.8)"; }) ; </script> </body> </html>
function copy_json(obj) { if (obj instanceof(Array)) { let ret = []; for (let i = 0; i < obj.length; i++) { ret[i] = obj[i]; } return ret; } else if (obj instanceof(Object)) { let ret = {}; for (let [key, val] of Object.entries(obj)) { ret[key] = val; } return ret; } else if (typeof(obj) == 'string') { return obj; } else { return obj; } } let obj = {'abc': '123', 'def': 123, 'ghi': [0, 1, 2]}; let new_obj = copy_json(obj); console.log(JSON.stringify(new_obj)); > {"abc":"123","def":123,"ghi":[0,1,2]}
123.456.toPrecision(4); > '123.5'
123456.789.toLocaleString(); > '123,456.789'
var org_val = 123.45; // 元の値 var res_val = org_val * 0.777; // 計算後の値 console.log(res_val); > 95.92065000000001 // そのまま出力すると桁数が多い var size = String(org_val).length + 2; // 元の値の桁数+2桁を表示 var cnv_val = res_val.toPrecision(size); cnv_val = Number(cnv_val); cnv_val.toLocaleString(); console.log(cnv_val); > 95.92065 // 桁数を抑えて出力